Come applicare un filtro su più oggetti usando AngularJS?

Question

Ho l'oggetto utente definito come di seguito.

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

Poi ho il seguente codice:

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

Ora, quando si digita nella casella di testo il testo: 'Testo di ricerca', voglio il filtro per visualizzare il nome dell'utente e il nome/età dell'amico Qualcuno può aiutarmi con come farlo?

Se sono corretto, allora penso che sia necessario creare un filtro personalizzato per questo o c'è qualche altro modo per ottenerlo?

Answer 1

Perché si vuole filtrare su due cose allo stesso tempo - alcune proprietà della matrice di amici e anche l'utente - è necessario creare il proprio custom filter che accetta 2 parametri aggiuntivi :

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

quindi chiamare in questo modo:

<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" è il modo in cui si inoltrano argomenti aggiuntivi a un filtro personalizzato.

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>