0

它的作用是接受“Github 用户名”的输入并使用它来显示其他值。它访问 API 并在名为“用户”的变量中捕获响应。我想要的是，当我输入一个不存在的用户名时，它应该显示“表格”、“错误”和 UI 的其他一些部分。当我输入有效的用户名时，它应该再次隐藏这些部分。

基本上，我希望能够在 ng-show 和 ng-hide 之间切换。我知道解决方案将非常简单，但我的大脑已经关闭，我花了最后 3 个小时尝试不同的排列，但都失败了。

继续解决..以免我会对此做噩梦，从字面上看。这段代码已经困扰着我了。

干杯!

 <!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1><div>

    <h1 ng-show="user">{{ message }}</h1>

  </div></h1>
  <div ng-show="username">
  User handle: {{ username }}</div><br/>
  <div ng-show="user">{{ error }}</div>
  <form name="searchUser">

<input type = "search" placeholder = "username to find" ng-model="username">
<input type="submit" value = "Search" ng-click="search(username)">
    Order: <select ng-model="repoSortSelector" ng-show="user">
      <option value="+name">Name</option>
      <option value="-stargazers_count">Star</option>
      <option value="+language">Language</option>
    </select>
  </form>
  <h2>{{ user.login }}</h2>
  <img ng-src="{{ user.avatar_url }}" title="{{ user.login }}">
  <table ng-show="user">
    <thead>
      <tr>
        <th>Name</th>
        <th>Language</th>
        <th>Stars</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos | orderBy: repoSortSelector">
      <td>{{ repo.name }}</td>
      <td>{{ repo.stargazers_count | number }}</td>
      <td>{{ repo.language }}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

和脚本

var app = angular.module('myApp', ['controllers']);
angular.module('controllers', []).controller('MainController', function($scope, $http) {


  $scope.message = "Search User"
  var onComplete = function(response) {

    $scope.user = response.data;
    if(user.message=="Not Found"){

      $scope.user=0;

    }
    $http.get($scope.user.repos_url)
      .then(onRepos, onReposError)

  };
  var onRepos = function(response) {

    $scope.repos = response.data;
    console.log($scope.repos);
    $scope.repoSortSelector = "-stargazers_count";
  }

  var onReposError = function(reason) {


    console.log(reason);

  }

  var onError = function(reason) {
    $scope.error = "Could not find the result. Please try something else! "

  }

  // $scope.message = "Hello, Angular!"

  $scope.search = function(username) {
    $http.get("https://api.github.com/users/" + username)
      .then(onComplete, onError);
  }



});
4

2 回答 2

0

您的代码阅读起来很混乱，尤其是您的then回调分布在随机位置。也许你可以像这样重写：

var app = angular.module('myApp', ['controllers']);

// Here better use dependency injection using the inline Array Notation
angular.module('controllers', []).controller('MainController', ['$scope', '$http', function($scope, $http) {
    $scope.message = 'Search User';

    $scope.search = function (username) {
        $http.get('https://api.github.com/users/' + username)
       .then(function (response) {
           // I think response.data is null if user is not found so you can
           // directly use $scope.user to check whether to display data
           $scope.user = response.data;

           // Return a promise here
           return $http.get($scope.user.repos_url);
       })
       .then(function (response) {
           $scope.repos = response.data;
           $scope.repoSortSelector = '-stargazers_count';
       })
       .catch(function (err) {
            $scope.error = err;
            console.log(err);
       });
   }
}]);

我在评论中提出了一些建议。

此外，始终使用"or '，而不是两者（我更喜欢后者）并使用三等号===来表示相等。

只需检查ng-show="user"以显示或隐藏部件或您的 UI。

于 2015-11-09T14:42:08.277 回答
0

我认为$scope.user应该设置为布尔值而不是$scope.user=0

因此，当$scope.user === true或ng-show = "user"（或是，我们找到了用户）时，我们会显示用户存在时的相关元素。

当$scope.user === false或ng-show= "!user"在我们的 HTML 中，我们显示与不存在的用户相关的元素。

如果user出于某种原因需要保留 int，请创建一个新变量以scope根据 的值投入user并使用它show/hide。

https://scotch.io/tutorials/how-to-use-ngshow-and-nghide 这是一个非常漂亮的使用方法指南show/hide

由于您只有两个操作（AFAICS），因此您不会遇到任何问题，当您尝试show/hide基于几个变量进行 3 个或更多事情时，事情开始变得更加复杂。

于 2015-11-09T14:32:20.867 回答