我有如下所定义的用户对象。
$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”,我希望该过滤器显示用户和朋友的名字/年龄的名称。 任何人都可以帮我如何做到这一点?
如果我是正确的,那么我想,我需要为此创建一个自定义过滤器或有任何其他方式,我可以做到这一点?
因为你想在一次两件事过滤-朋友阵列的一些特性,也是用户-你需要创建自己的自定义过滤器 ,它接受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”是你传递额外的参数,以自定义过滤器的方式。
小提琴 。
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>