如何使用多個鏈接過濾AngularJS中的列表

我已經瀏覽了很多關於如何過濾列表的教程，並且找不到我的簡單用例的示例。如何使用多個鏈接過濾AngularJS中的列表

我有幾個按鈕，如

<a href="#" id="filter-by-name">Name</a> 
<a href="#" id="filter-by-age">Age</a> 
<a href="#" id="filter-by-height">Height</a>

我有var persons = {...}對象，我展示它像

<div ng-repeat="person in persons"> 
    {{person.name...}} 
</div>

如何創建一個過濾器，使每一次我會點擊的一個按鈕列表將被過濾？

我曾嘗試加入ng-repeat="person in persons | filter:filterPersons" 和腳本側寫：

$scope.filterPersons(person){ 
    if (person.name == "John") 
    return person; 
}

但是這僅僅是一個用例（？我怎麼能由另一名過濾） - 換句話說 - 如何將鏈接連接到過濾器？

來源

2013-01-17 Alon

您可以在單擊鏈接時在範圍上設置變量，並在過濾器函數中使用此變量。 – akonsu

怎麼樣？像這樣ng-repeat =「person in persons | filter：filterPersons（{{myParam}}）」？ – Alon

您可以像使用其他任何東西一樣將過濾器綁定到作用域變量。因此，只需將用戶點擊並將其綁定到ng-repeat篩選器參數時，將所需的篩選器設置爲範圍即可。請參閱：

<div ng-app> 
    <span ng-click="myFilter = {type: 1}">Type 1</span> | 
    <span ng-click="myFilter = {type: 2}">Type 2</span> | 
    <span ng-click="myFilter = null">No filter</span> 
    <ul ng-controller="Test"> 
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li> 
    </ul> 
</div>

function Test($scope) { 
    $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}]; 
}

注意，當用戶點擊過濾器的myFilter改變，而且它綁定到ng-repeat過濾器。 Fiddle here。你也可以創建一個新的過濾器，但這個解決方案要好得多。

來源

2013-01-17 14:21:38

這真棒。我試圖用這個創建一個reg ex很困難。 – Winnemucca

爲了使它工作，我必須做'myFilter = {}'而不是'myFilter = null'，可能是Angular的更新？ –

那麼這個「unclick/unfilter」如何呢？ – efwjames

我的回覆與Caio非常相似。我只是想展示如何過濾出現有的數組。

在我ng重複我有一個搜索過濾器通過單詞。我希望製表符可以查找字符串匹配。所以我增加了一個額外的過濾器

<tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter"> 
    <td>[[drink.name]]</td>

我只有我的表的頂部，但這應該顯示的策略。稱爲myFilter的第二個過濾器附加到下面的按鈕。

<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button> 
</div> 
<div class="btn-group" role="group"> 
    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button> 
</div>

上的每個按鈕，我可以添加一個NG單擊經過myFilter並搜索與drink.name的TD。在每個ng-click中，我可以設置要搜索的名稱的值。所以每個包含蘇打或能量的標題都可以通過篩選。

來源

2015-07-03 16:56:27 Winnemucca

如何使用多個鏈接過濾AngularJS中的列表

回答

相關問題