いくつかのリンクを使用してAngularJSのリストをフィルタリングする方法

Question

リストをフィルタリングする方法に関する多くのチュートリアルを行ってきましたが、私の単純な使用例の例は見つかりません。私はvar persons = {...}オブジェクトを持っているように

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

として

は、私はいくつかのボタンを持っていると私はそうするたびに、私はのいずれかをクリックしますフィルタを作成するにはどうすればよい私は

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

が、これは唯一のユースケースである - つまり - リンクをリンクにどのように接続すればよいですか？

Answer 1

フィルタは、他の操作と同様に、スコープ変数にバインドできます。したがって、ユーザがクリックしてフィルタのパラメータであるng-repeatにバインドしたときに、適切なフィルタをスコープに設定するだけで済みます。参照：

は、ユーザーがフィルタをクリックしたときに myFilterが変更されたことを

<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'}]; 
} 

お知らせ、そしてそれはng-repeatフィルターにバインドされていること。 Fiddle here。新しいフィルタを作成することもできますが、このソリューションははるかに優れています。

Answer 2

私の応答はCaio'sに非常に似ています。既存の配列をフィルタリングする方法を示したかっただけです。

私のng-repeatには、単語を通過する検索フィルタがあります。タブで文字列の一致を探したかった。そこで追加のフィルタを追加しました

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

私は自分のテーブルの上部だけを持っていますが、これは戦略を示すはずです。 myFilterという2番目のフィルタは、下のボタンに添付されています。

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

各ボタンで、myFilterを通過するng-clickを追加でき、drink.nameでtdを検索できます。各クリックで、検索する名前の値を設定できます。したがって、ソーダやエネルギーを含むすべてのタイトルは、フィルタリングすることができます。