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

Question

What it does is that it takes the input of 'Github username' and uses that to display other values. 它的作用是接受“ Github用户名”的输入，并使用它来显示其他值。 It hits the API and catches the response in a variable called 'user'. 它访问API，并在名为“ user”的变量中捕获响应。 What I want is that when I enter a non-existent username, it should show the 'table', 'error', and a few other parts of the UI. 我想要的是，当我输入不存在的用户名时，它应该显示UI的“表”，“错误”和其他一些部分。 When I enter a valid username, it should hide those parts again. 当我输入有效的用户名时，它应该再次隐藏这些部分。

Basically, I want to be able to toggle between ng-show and ng-hide. 基本上，我希望能够在ng-show和ng-hide之间切换。 I know the solution is going to be something really simple but my brain has shut down and I have spent the last 3 hours trying different permutations and failed all. 我知道解决方案将非常简单，但是我的大脑已经关闭，我花了最后3个小时尝试不同的排列，但都失败了。

Go on and solve.. Lest I am going to have nightmares about this, literally. 继续解决。.恐怕我真的会为此做噩梦。 This code is haunting me already. 这段代码已经困扰着我。

Cheers! 干杯!

 <!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>

and Script 和脚本

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

I think $scope.user should be set as a boolean not $scope.user=0 我认为$scope.user应该设置为布尔值，而不是$scope.user=0

So when $scope.user === true or ng-show = "user" (or YES we found a user) we show the related element for when user exists. 因此，当$scope.user === true或ng-show = "user" （或YES，我们找到一个用户）时，我们显示当user存在时的相关元素。

when $scope.user === false or ng-show= "!user" in our HTML we display the element relevant to the user not existing. 当$scope.user === false或ng-show= "!user"在我们的HTML中时，我们显示与该用户不相关的元素。

If user needs to remain an int for some reason, create a new variable to throw into the scope based on the value of user and use it to show/hide . 如果user由于某种原因需要保留一个int值，请根据user的值创建一个新变量以放入scope ，并使用它来show/hide 。

https://scotch.io/tutorials/how-to-use-ngshow-and-nghide this is a pretty nifty guide on ways to use show/hide https://scotch.io/tutorials/how-to-use-ngshow-and-nghide这是一个使用show/hide漂亮指南

As you've only two actions (AFAICS) then you won't run into any problems, things start getting way more complicated when you're trying to show/hide 3 or more things based on a couple of variables. 由于您只有两个操作（AFAICS），因此不会遇到任何问题，当您尝试基于几个变量show/hide 3个或更多事件时，事情会变得越来越复杂。

Answer 2

You code is confusing to read, especially your then callbacks spread at random places. 你的代码混淆阅读，尤其是你的then回调在随机的地方蔓延。 Maybe you could rewrite more like this : 也许您可以这样重写：

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);
       });
   }
}]);

I put some suggestions in comments. 我在评论中提出了一些建议。

Also, always use " or ' , not both (I prefer the latter) and use triple equals === for equality. 另外，请始终使用"或' ，不要同时使用两者（我更喜欢后者），并使用三等号===进行相等性处理。

Simply check for ng-show="user" to show or hide parts or your UI. 只需检查ng-show="user"即可显示或隐藏部件或用户界面。

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

问题描述

2 个解决方案

解决方案1
0 2015-11-09 14:32:20

解决方案2
0 2015-11-09 14:42:08

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

问题描述

2 个解决方案

解决方案1 0 2015-11-09 14:32:20

解决方案2 0 2015-11-09 14:42:08

解决方案1
0 2015-11-09 14:32:20

解决方案2
0 2015-11-09 14:42:08