[英]Angular toggle between ng-show and ng-hide
它的作用是接受“ Github用戶名”的輸入，並使用它來顯示其他值。 它訪問API，並在名為“ user”的變量中捕獲響應。 我想要的是，當我輸入不存在的用戶名時，它應該顯示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);
}
});
我認為$scope.user應該設置為布爾值，而不是$scope.user=0
因此，當$scope.user === true或ng-show = "user" （或YES，我們找到一個用戶）時，我們顯示當user存在時的相關元素。
當$scope.user === false或ng-show= "!user"在我們的HTML中時，我們顯示與該用戶不相關的元素。
如果user由於某種原因需要保留一個int值，請根據user的值創建一個新變量以放入scope ，並使用它來show/hide 。
https://scotch.io/tutorials/how-to-use-ngshow-and-nghide這是一個使用show/hide漂亮指南
由於您只有兩個操作（AFAICS），因此不會遇到任何問題，當您嘗試基於幾個變量show/hide 3個或更多事件時，事情會變得越來越復雜。
你的代碼混淆閱讀，尤其是你的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"即可顯示或隱藏部件或用戶界面。
使用切換類的Angular js ng-show和ng-hide與動畫
[英]Angular js ng-show and ng-hide with animation using toggle class
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.