4

我有一个关于在 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 返回一些字符串。 这是现场演示

为什么 personFilter 在显示从 GetItemsTitels 过滤器返回的搅拌的最后一列上工作？如果 jsfiddle 如果您在过滤器中键入“aa”，则不会得到任何结果。是因为已经分配了该列的过滤器，这就是为什么 personFilter 不适用它的原因吗？

4

3 回答 3

6

据我了解：

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

给定：

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 -->
于 2014-03-04T21:57:41.923 回答
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/

这种方法可能存在一个问题，因为它会在每个摘要循环中注入项目标题。因此，在大型数据集上应用控制器中的 -filter 可能会更好。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));
于 2013-07-10T10:02:34.630 回答
1

如果您在过滤器中键入“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/

于 2013-07-10T11:27:34.047 回答