Filter does not work in ng-repeat

Question

I have a question about filtering in ng-repeat.

Here is the 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 returns some string. Here is a live demo

Why is doenst personFilter working on the last column, which shows that the engine returned from the GetItemsTitels filter? If jsfiddle, if you type "aa" in the filter, you will not get any result. Is it because the filter for this column is already assigned, and therefore personFilter does not apply to it?

Answer 1

The filter on ng-repeat will only consider what is in the object. Not something that can be displayed while the loop is running. However, you can populate friends real data, and then the filter should work.

Using:

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

There may be one problem with this approach, as it introduces item values ​​into each digest cycle. Therefore, it would be better to apply the injectItemTitles filter in the controller on large data sets.

---

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

Answer 2

From what I understand:

Filters work only with the "array" type, and not with the "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 --> 

Answer 3

if you type “aa” in the filter, you will not get any result, because it will filter this “aa” in the friends list where “aa” does not exist. Since there are identifiers in the array of elements that will again filter and return a string of all elements. Thus, everything that you enter in the text box will be a filter only from the list of friends. If you still want to achieve the same goal, you need to change your JSON friends.

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

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