过滤器无法在ng-repeat中工作

Question

我有一个关于ng-repeat过滤的问题。

这是模板代码：

<li ng-repeat="friend in friends | filter:personFilter">
    <span>{{friend.name}}</span>
    <span>{{friend.phone}}</span>
    <span>{{friend.items | GetItemsTitels}}</span>
</li>
</lang-html>

其中GetItemsTitels返回一些字符串。 的 Here is live demo

为什么doenst personFilter在最后一栏上工作，显示从GetItemsTitels过滤器返回的stirng？如果jsfiddle，如果你键入＆＃39; aa＆＃39;过滤你不会得到任何结果。 是因为此列的过滤器已经分配，​​这就是personFilter不适用它的原因吗？

Answer 1

据我所知：

过滤器仅适用于“数组”类型，而非“对象”类型。

下式给出：

var friends={'a':'april','b':'bob'};

<li ng-repeat="friend in friends | filter:personFilter">
<!-- personFilter will not run -->


var friends=[{code:'a',name:'april'},{code:'b',name:'bob'}];
personFilter=function(item){
    return item.code !== personModel
}

<li ng-repeat="friend in friends | filter:personFilter">
<!-- will filter -->

Answer 2

ng-repeat上的过滤器只会考虑对象中的。不是循环运行时可能显示的内容。但是，您可以使用实际数据填充friends，然后过滤器应该可以正常工作。

用法：

<ul>
  <li ng-repeat="friend in friends | injectItemTitles:'itemTitles' | filter:personFilter">
    <span>{{friend.name}}</span>
    <span>{{friend.phone}}</span>
    <span>{{friend.itemTitles.join(', ')}}</span>
  </li>
</ul>

演示：http://jsbin.com/iciyoq/2/

这种方法可能存在一个问题，因为它会在每个摘要周期上注入项目标题。因此，最好在控制器上对大型数据集应用injectItemTitles - 过滤器。

---

完整代码：

(function (app, ng) {
  'use strict';

  app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.friends = [{
      name: 'John',
      phone: '555-1276',
      items : ['id0', 'id1']
    }, {
      name: 'Mary',
      phone: '800-BIG-MARY',
      items : ['id1', 'id2']
    }, {
      name: 'Mike',
      phone: '555-4321',
      items : ['id2', 'id3']
    }, {
      name: 'Adam',
      phone: '555-5678',
      items : ['id3', 'id4']
    }, {
      name: 'Julie',
      phone: '555-8765',
      items : ['id4', 'id5']
    }];
  }]);

  app.filter('injectItemTitles', ['AllItems', 'getItemTitlesFilter', function(AllItems, getItemTitlesFilter) {
    return function(friends, prop){
      return friends.map(function(friend) {
        friend[prop] = getItemTitlesFilter(friend.items);
        return friend;
      });
    };
  }]);

  app.filter('getItemTitles', ['AllItems', function(AllItems){
    return function(items){
      return items.map(function (id) {
        return AllItems[id];
      });
    };
  }]);

  app.service('AllItems', function(){
    return {
      'id0' : 'aaa',
      'id1' : 'aab',
      'id2' : 'aba',
      'id3' : 'abb',
      'id4' : 'baa',
      'id5' : 'bab',
      'id6' : 'bba',
      'id7' : 'bbb'
    };
  });
}(angular.module('app', []), angular));

Answer 3

如果您在过滤器中键入“aa”，则不会得到任何结果，因为它会在朋友列表中过滤此“aa”，其中“aa”不存在。由于items数组中有id，它将再次过滤并返回所有项目中的字符串。因此，无论您在文本框中输入什么，都只会从朋友列表中进行过滤。如果你仍然希望实现同样的事情，那么你必须修改你的朋友JSON。

<li ng-repeat="friend in friends | filter:personFilter">
<span>{{friend.name}}</span>
<span>{{friend.phone}}</span>
<span>{{friend.items | GetItemsTitels}}</span>
</li>

这是http://jsfiddle.net/RXmpT/3/