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>

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

此处的Plunker：http://plnkr.co/edit/3os7gIxSjlyDO1CGKcFT?p=preview

Answer 2

我认为你应该创建自己的过滤器来做到这一点。

这是：http://jsfiddle.net/QXSR8/

<强> HTML

<div>
    {{answer | empty}}
</div>

<强> JS

angular.module('project', []).
  filter('empty', function() {
    return function(input) {

        if (!input || !input.length){
           return "Array is empty"; 
        } else {
            return input;
        }
    }
});

角度检查过滤器返回的内容

2 个答案: