Jak zastosować filtr na wielu obiektach za pomocą AngularJS?

Question

Mam zdefiniowany obiekt użytkownika, jak poniżej.

$scope.users = [{id: 1, name: 'Adam', friends: [{name: 'John', age: 21, sex: 'M'}, {name: 'Brad', age: 32, sex: 'M'}]}] 

Następnie Mam następujący kod:

<div ng-repeat="user in users> 
<input type="text" ng-model="searchText"> 
<div ng-repeat="friend in user.friends | filter:searchText"> 
    {{user.name}} {{friend.name}} {{friend.age}} 
</div> 
</div> 

Teraz po wpisaniu w polu tekstowym tekst: „searchText”, chcę filtr, aby wyświetlić nazwę użytkownika i nazwę/wiek przyjaciela. Czy ktoś może mi pomóc, jak to zrobić?

Jeśli mam rację, to myślę, że muszę utworzyć niestandardowy filtr do tego lub czy istnieje inny sposób, w jaki mogę to zrobić?

Answer 1

Ponieważ chcesz filtrować na dwie rzeczy na raz - niektóre właściwości tablicy przyjaciół i również użytkownikowi - musisz stworzyć swój własny custom filter że przyjmuje 2 dodatkowe parametry :

myApp.filter('myFilter', function() { 
    return function(friends, searchText, username) { 
    var searchRegx = new RegExp(searchText, "i"); 
    if ((searchText == undefined) || (username.search(searchRegx) != -1)) { 
     return friends; 
    } 
    var result = []; 
    for(i = 0; i < friends.length; i++) { 
     if (friends[i].name.search(searchRegx) != -1 || 
      friends[i].age.toString().search(searchText) != -1) { 
      result.push(friends[i]); 
     } 
    } 
    return result; 
    } 
}); 

Następnie nazwać tak:

<div ng-repeat="user in users"> 
    <input type="text" ng-model="searchText"> 
    <div ng-repeat="friend in user.friends | myFilter:searchText:user.name"> 
     {{user.name}} {{friend.name}} {{friend.age}} 
    </div> 
</div> 

": searchText: user.name" to sposób przekazywania dodatkowych argumentów do filtru niestandardowego.

Fiddle.

Answer 2

http://docs.angularjs.org/api/ng.filter:filter

<div ng-repeat="user in users> 
<input type="text" ng-model="search.$"> 
<div ng-repeat="friend in user.friends | filter:search"> 
    {{user.name}} {{friend.name}} {{friend.age}} 
</div> 
</div>