javascript - Angular 检查过滤器返回的内容

Question

我有一个包含 ng-repeat 和过滤器的列表，过滤器过滤器基于 html 输入。如果过滤器生成一个空列表，我想向用户显示一些信息性消息。我不知道怎么...

 Search the list: <input type="text" ng-model="searchText">
 <div ng-controller="my-ctrl">
    <ul id="list">
        <li ng-repeat="element in myElements | filter:searchText" >
           {{element.data }}
        </li>
    </ul>
    ***<div>{{myElements.length}}</div>*** //length stays
      // the same no matter what the filter is returning...
       <div ng-show="myElements.length">My Informative Msg</div>

我尝试做的是根据 myElements.length 显示我的信息性消息，我认为过滤器将更新我范围内 myElements 的值。但是，当我搜索项目(例如缩小或扩大列表)时，我发现 myElements.length 保持不变。

是否有一些优雅的解决方案来知道过滤器何时为空，或者更一般地知道过滤器返回了什么？

Answer 1

有一个巧妙的技巧。不是过滤真实的列表，而是“动态”创建一个新的过滤列表，它将只包含过滤的项目或不包含任何内容。如果没有，则显示消息。

app.controller('MainCtrl', function($scope) {
  $scope.items = ["Foo", "Bar", "Baz"];
});

和:

<input ng-model="searchText" />
<ul>
  <li ng-repeat="item in filteredItems = (items | filter: searchText)">
    {{ item }}
  </li>
</ul>
<div ng-hide="filteredItems.length">There is no item matching</div>

因此，如果您的过滤器不匹配任何项目，您将看到该消息。

这里是傻瓜:http://plnkr.co/edit/3os7gIxSjlyDO1CGKcFT?p=preview