javascript 过滤器在 ng-repeat 中不起作用

Filter not working in ng-repeat

提问by Sobis

I have a question about filtering in ng-repeat.

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

Here is template code:

这是模板代码：

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

where GetItemsTitels return some string. Here is live demo

其中 GetItemsTitels 返回一些字符串。 这是现场演示

Why doenst personFilter working on last column which shows stirng returned from GetItemsTitels filter? If jsfiddle if you type 'aa' in filter your don't get any result. Is it because filter for this column is already assigned and that is why personFilter doesn't apply for it?

为什么不让 personFilter 处理显示从 GetItemsTitels 过滤器返回的搅拌的最后一列？如果 jsfiddle 如果您在过滤器中键入“aa”，则不会得到任何结果。是不是因为已经分配了此列的过滤器，这就是为什么 personFilter 不申请它？

采纳答案by Yoshi

A filter on ng-repeatwill only take into account what is inthe object. Not what might be displayed while the loop is running. You could however populate friendswith the real data and then the filter should work.

在过滤器ng-repeat将只考虑什么是在对象。不是循环运行时可能显示的内容。但是friends，您可以填充真实数据，然后过滤器应该可以工作。

Usage:

用法：

<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>

Demo: http://jsbin.com/iciyoq/2/

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

There might be one problem with this approach, as it whould injectthe item titels on each digest cycle. So it could be better to apply the injectItemTitles-filter in the controller on large datasets.

这种方法可能存在一个问题，因为它会在每个摘要循环中注入项目名称。因此，在大型数据集的控制器中应用-filter可能会更好。injectItemTitles

---

---

Full code:

完整代码：

(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));

回答by TOBlender

From what I understand:

据我了解：

Filters only work on "array" type, not "object" type.

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

given:

给出：

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 -->

回答by Jay Shukla

if you type 'aa' in filter your don't get any result because it will filter this 'aa' in friends list where 'aa' is not exists. As there are ids in items array which will again filters and returns string from all items. So whatever you type in text box will be filter from friends list only. If you still want to achieve this same thing then you have to modify you friends JSON.

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

Here it is http://jsfiddle.net/RXmpT/3/

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