21

リストをフィルタリングする方法について多くのチュートリアルを調べてきましたが、単純なユースケースの例が見つかりません。

のようないくつかのボタンがあります。

<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 つの使用例にすぎません (別の名前でフィルター処理するにはどうすればよいですか?) - つまり、リンクをフィルターに接続するにはどうすればよいですか?

4

2 に答える 2

37

他のものと同じように、フィルターをスコープ変数にバインドできます。したがって、必要なのは、ユーザーがクリックして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。ここでフィドル。新しいフィルターを作成することもできますが、このソリューションの方がはるかに優れています。

于 2013-01-17T14:21:38.833 に答える
1

私の反応はカイオの反応と非常に似ています。既存の配列を除外する方法を示したかっただけです。

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

于 2015-07-03T16:56:27.693 に答える