如何使用AngularJS將過濾器應用於多個對象？

我有用戶對象定義如下。如何使用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」，我希望該過濾器顯示用戶名和名稱/朋友的年齡。任何人都可以幫助我如何做到這一點？

如果我是正確的，那麼我認爲我需要爲此創建一個自定義過濾器，或者是否有任何其他方式可以實現此目的？

來源

2012-12-12 Sabarish Sankar

因爲你想在一次兩件事過濾 - 朋友陣列的一些特性，也是用戶 - 你需要創建自己的custom filter接受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」是將附加參數傳遞給自定義過濾器的方式。

Fiddle。

來源

2012-12-12 17:18:33

非常感謝Mark！但是這個filterFilter（friends，searchText）會過濾所有的朋友對象，即姓名，年齡和性別，或者只是名字和年齡。我的要求是我只想'名稱'和'年齡'是可搜索的，並且結果僅在朋友的這兩個對象上被過濾，因爲那些字段被顯示而不是'性' –

查看更新的答案。 –

我意識到這是多少年......但是當我的輸入的'searchText'在濾鏡內部總是未定義時會發生什麼？很明顯，範圍問題顯而易見，但爲什麼？ – Clev3r

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>

來源

2012-12-12 08:24:31

感謝fastreload！這有幫助！但是這個過濾器的目的是什麼？這個過濾器只會**用戶名**和**朋友的姓名和年齡**嗎？ –

如文檔中所述，它將搜索對象數組內的對象的所有屬性。你可以把'$'想象成一個神奇的通配符。 –

感謝fastreload！在我的朋友對象中，我有三個屬性：姓名，年齡和性別。但我不希望性被搜索。有什麼辦法可以實現這個目標嗎？ –

如何使用AngularJS將過濾器應用於多個對象？

回答

相關問題