在Angular JS中无法使用ng-hide和过滤器显示“未找到”

Question

I am trying to implement instant search using filters in angular js. 我正在尝试使用angular js中的过滤器实现即时搜索。 I want the "Not Found!!" 我想要“未找到！” message to be displayed when the filter is empty ie when no matching result is found. 过滤器为空（即未找到匹配结果）时显示的消息。 The ng-hide directive doesn't seem to work when filter array is empty. 当过滤器数组为空时， 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>

Answer 1

You should update your code like below: 您应该像下面那样更新代码：

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

UPDATED: ng-hide changed to ng-show 更新： ng-hide更改为ng-show

Answer 2

Moving the ng-hide outside ng-repeat worked!! 将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>

Answer 3

 <!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-hide和过滤器显示“未找到”

问题描述

3 个解决方案

解决方案1
0 2015-10-27 10:18:16

解决方案2
0 已采纳 2015-10-27 12:16:16

解决方案3
0 2015-10-27 12:34:18

在Angular JS中无法使用ng-hide和过滤器显示“未找到”

问题描述

3 个解决方案

解决方案1 0 2015-10-27 10:18:16

解决方案2 0 已采纳 2015-10-27 12:16:16

解决方案3 0 2015-10-27 12:34:18

解决方案1
0 2015-10-27 10:18:16

解决方案2
0 已采纳 2015-10-27 12:16:16

解决方案3
0 2015-10-27 12:34:18