无法显示“;未找到“;在Angular JS中使用ng隐藏和过滤器

Unable to display "Not found" using ng-hide and filters in Angular JS

本文关键字：ng 隐藏 过滤器 JS 显示 Angular      更新时间：2023-09-26

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

您应该更新您的代码，如下所示：

    <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隐藏更改为ng显示

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

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

相关文章：