在Angular JS中無法使用ng-hide和過濾器顯示“未找到”
[英]Unable to display “Not found” using ng-hide and filters in Angular JS
問題描述
我正在嘗試使用angular js中的過濾器實現即時搜索。 我想要“未找到！” 過濾器為空（即未找到匹配結果）時顯示的消息。 當過濾器數組為空時， ng-hide指令似乎不起作用。
<!DOCTYPE html> <html ng-app="myApp"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body ng-controller="places as p"> <div> <input type="text" ng-model="cname" /> <div ng-repeat="country in abc=(p.countries|filter:cname)"> <h1>{{country.name}}</h1>{{abc.length}} <span ng-hide="abc.length">Not Found!!</span> </div> </div> <script> var app = angular.module('myApp', []); var arr = [{ name: 'germany' }, { name: 'mexico' }, { name: 'india' }, { name: 'UK' }, { name: 'argentina' }]; app.controller('places', function() { this.countries = arr; }); </script> </body> </html>
3 個解決方案
解決方案1
0 2015-10-27 10:18:16
您應該像下面那樣更新代碼：
<div ng-repeat="country in abc = (p.countries | filter:cname)">
<h1>{{country.name}}</h1>{{abc.length}}
<span ng-show="abc.length < 1">Not Found!!</span>
</div>
更新： ng-hide更改為ng-show
解決方案2
0 已采納 2015-10-27 12:16:16
將ng-hide到ng-repeat之外！！！
<input type="text" ng-model="cname" /> <div ng-repeat="country in abc=(p.countries|filter:cname)"> <h1>{{country.name}}</h1>{{abc.length}} </div> <span ng-hide="abc.length">Not Found!!</span>
解決方案3
0 2015-10-27 12:34:18
<!DOCTYPE html> <html ng-app="myApp"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body ng-controller="places as p"> <div> <input type="text" ng-model="cname" /> <div ng-repeat="country in abc=(p.countries|filter:cname)"> <h1>{{country.name}}</h1>{{abc.length}} </div> <span ng-hide="abc.length">Not Found!!</span> </div> <script> var app = angular.module('myApp', []); var arr = [{ name: 'germany' }, { name: 'mexico' }, { name: 'india' }, { name: 'UK' }, { name: 'argentina' }]; app.controller('places', function() { this.countries = arr; }); </script> </body> </html>
使用切換類的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.