Question

如果我的列表中找不到任何元素，我想显示一条消息。如果找到该项目，则不再显示该消息。我该怎么做呢？这是我的例子： plnkr

  <body ng-app="MyApp">
    <div ng-controller="MyCtrl">

      <h3>Filter by String</h3>
      <form class="form-inline">
        <input ng-model="match.name" type="text" placeholder="Filter by name" autofocus>
      </form>
      <ul ng-repeat="friend in friends | exact: match | orderBy: 'name' ">
        <li>{{friend.name}} ({{friend.age}})</li>
      </ul>

    <div>pas d'élement trouvé dans la liste</div>

    </div>

  </body>

如果在我的列表中找到0，我想显示“pas d'éléménttrouvé...”

控制器代码：

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.friends = [
    { name: "Peter",   age: 20 },
    { name: "Pablo",   age: 55 },
    { name: "Linda",   age: 20 },
    { name: "Marta",   age: 37 },
    { name: "Othello", age: 20 },
    { name: "Markus",  age: 32 }
  ];

  $scope.filterFunction = function(element) {
    return element.name.match(/^Ma/) ? true : false;
  };

})

app.filter('exact', function(){
  return function(items, match){
    var matching = [], matches, falsely = true;
    
    // Return the items unchanged if all filtering attributes are falsy
    angular.forEach(match, function(value, key){
      falsely = falsely && !value;
    });
    if(falsely){
      return items;
    }
    
    angular.forEach(items, function(item){ // e.g. { title: "ball" }
      matches = true;
      angular.forEach(match, function(value, key){ // e.g. 'all', 'title'
        if(!!value){ // do not compare if value is empty
          matches = matches && (item[key] === value);  
        }
      });
      if(matches){
        matching.push(item);  
      }
    });
    return matching;
  }
});

感谢

Answer 1

您可以在控制器中将变量定义为$scope.isListPresent = $scope.friends.length > 0;，根据此变量，您可以在ng-if上添加div，如下所示 -

<div ng-show="!isListPresent">pas d'élement trouvé dans la liste</div>

这可以解决您的问题。

Answer 2

Plunker

您可以将过滤后的列表保存到任何变量，并检查此变量以查看过滤后是否有可用的列表。

<ul ng-repeat="friend in (result = (friends | exact: match | orderBy: 'name') ) ">
        <li>{{friend.name}} ({{friend.age}})</li>
</ul>
<p ng-show="result.length == 0"> Not Found </p>

验证消息筛选器搜索角度

2 个答案: