如何使用AngularJS对多个对象应用过滤器？

Question

我有如下定义的用户对象.

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

然后我有以下代码:

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

现在,当我在文本框中键入文本:'searchText'时,我希望过滤器显示用户的名称和朋友的姓名/年龄.任何人都可以帮我解决这个问题吗？

如果我是正确的,那么我认为我需要为此创建自定义过滤器,还是有其他方法可以实现此目的？

Answer 1

因为您想要同时过滤两件事 - friends数组的某些属性以及用户 - 您需要创建自己的自定义过滤器,该过滤器接受2个附加参数:

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

然后像这样调用它:

<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"是您将其他参数传递给自定义过滤器的方式.

小提琴.