Question

它的作用是输入＆＃39; Github用户名＆＃39;并使用它来显示其他值。它命中API并在名为＆＃39; user＆＃39;的变量中捕获响应。我想要的是，当我输入一个不存在的用户名时，它应该显示＆＃39;表＆＃39;，＆＃39;错误＆＃39;以及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);
  }



});

Answer 1

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

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

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

如果user由于某种原因需要保留为int，请创建一个新变量，根据scope的值投入user并将其用于show/hide

https://scotch.io/tutorials/how-to-use-ngshow-and-nghide这是关于如何使用show/hide

的非常好的指南

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

Answer 2

您的代码令人困惑，尤其是您在随机位置传播的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);
       });
   }
}]);

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

此外，请始终使用"或'，而不是两者（我更喜欢后者）并使用三等于===来实现相等。

只需检查ng-show="user"即可显示或隐藏部件或用户界面。

ng-show和ng-hide之间的角度切换

2 个答案: