Làm cách nào để áp dụng bộ lọc trên nhiều đối tượng bằng AngularJS?

Question

Tôi có đối tượng người dùng được định nghĩa như bên dưới.

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

Sau đó, tôi đã đoạn mã sau:

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

Bây giờ khi tôi gõ vào hộp văn bản: 'searchText', tôi muốn các bộ lọc để hiển thị tên của người sử dụng và tên/tuổi của bạn. Bất cứ ai có thể giúp tôi làm thế nào để làm điều này?

Nếu tôi đúng, tôi nghĩ rằng tôi cần tạo bộ lọc tùy chỉnh cho điều này hoặc có cách nào khác để tôi có thể thực hiện việc này không?

Answer 1

Bởi vì bạn muốn lọc vào hai điều cùng một lúc - một số tính chất của mảng bạn bè và cũng là người sử dụng - bạn sẽ cần phải tạo riêng của bạn custom filter chấp nhận 2 tham số bổ sung :

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

Sau đó gọi nó như vậy:

<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" là cách bạn chuyển đối số bổ sung vào bộ lọc tùy chỉnh.

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>