在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.