[英]How to apply a filter on multiple objects using AngularJS?
我有如下定義的用戶對象。
$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'時,我希望過濾器顯示用戶的名稱和朋友的姓名/年齡。 任何人都可以幫我解決這個問題嗎?
如果我是正確的,那么我認為我需要為此創建自定義過濾器,還是有其他方法可以實現此目的?
因為您想要同時過濾兩件事 - 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”是您將其他參數傳遞給自定義過濾器的方式。
小提琴 。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.