1

我有一个带有 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 保持不变。

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

4

2 回答 2

4

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

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

于 2013-11-09T13:26:19.960 回答
0

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

这是：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;
        }
    }
});
于 2013-11-09T13:39:56.077 回答