Wie wendet man einen Filter auf mehrere Objekte mit AngularJS an?

Question

Ich habe das Benutzerobjekt wie folgt definiert.

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

Dann habe ich den folgenden Code:

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

Nun, wenn ich in das Textfeld den Text eingeben: ‚search‘, möchte ich der Filter den Namen des Benutzers angezeigt werden und den Namen/Alter des Freundes. Kann mir jemand helfen, wie das geht?

Wenn ich richtig bin, dann denke ich, dass ich einen benutzerdefinierten Filter dafür erstellen muss oder gibt es eine andere Möglichkeit, die ich erreichen kann?

Answer 1

Weil du auf einmal auf zwei Dinge filtern wollen - einige Eigenschaften des Arrays Freunden und auch den Benutzer - Sie müssen Ihre eigenen custom filter erstellen, die zwei zusätzliche Parameter akzeptiert :

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

es dann rufen sie wie folgt:

<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" ist die Methode, mit der Sie zusätzliche Argumente an einen benutzerdefinierten Filter übergeben.

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>