web-dev-qa-db-ja.com

複数のリンクを使用して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>

ボタンを1つクリックするたびにリストがフィルターされるようにフィルターを作成するにはどうすればよいですか？

追加しようとしましたng-repeat="person in persons | filter:filterPersons"およびスクリプト側で次のように記述します。

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

しかし、これは1つの使用例にすぎません（別の名前でフィルタリングするにはどうすればよいですか？）-言い換えると-リンクをフィルターに接続するにはどうすればよいですか？

javascripthtmlfilterangularjs
21
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フィルターにバインドされていることに注意してください。 ここでフィドル 。新しいフィルターを作成することもできますが、このソリューションの方がはるかに優れています。

37
Caio Cunha

私の反応はカイオの反応とよく似ています。既存の配列をフィルターで除外する方法を示したかっただけです。

私の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を通過して、ddをdrink.nameで検索するng-clickを追加できます。各ng-clickで、検索する名前の値を設定できます。したがって、ソーダまたはエネルギーを含むすべてのタイトルをフィルタリングできます。

1
Winnemucca