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

【问题标题】：Unable to display "Not found" using ng-hide and filters in Angular JS无法在 Angular JS 中使用 ng-hide 和过滤器显示“未找到”
【发布时间】：2015-10-27 10:08:25
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

AngularJS display message when object is empty in repeater的可能重复
尝试将 ng-hide 移到 ng-repeat 之外。
谢谢。将 ng-hide 移到 ng-repeat 之外有效！！ . :)

标签： javascript jquery angularjs search

【解决方案1】：

你应该像下面这样更新你的代码：

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

将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】：

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

【讨论】：

您在循环中添加了 ng-hide，这就是它不显示的原因。