0

私はこの素晴らしい投稿に従っています:いくつかのリンクを使用して AngularJS でリストをフィルター処理する方法

ここで、クリック時に複数のパラメーターでフィルター処理されたデータを表示したいと思います。

html

<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 = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = [{type: 1}, {type:3}]">Types 1 & 3</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>

js

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

複数パラメーター フィルターの例は、そのようには機能しません。カスタムフィルターをコーディングせずに、それを達成するための簡単で一般的な方法はありますか?

jsfiddle を更新しました: http://jsfiddle.net/pkxPa/89/

何か案が ？ng-show を使用するようなより良い方法があるかもしれません (この投稿のように: ng-repeat 内の ng-click で非表示の div を表示する) ?

ありがとう

4

1 に答える 1

8

plunkr ( http://jsfiddle.net/pkxPa/91/ ) を更新して、いくつかの小さなエラーを修正し、カスタム関数を使用してそれを行う方法を示しました。残念ながら、あなたが試したようにインラインで行う方法はないと思います。

コントローラの宣言を一番上の div に移動しました

<div ng-app ng-controller="Test">
  <span ng-click="myFilter = {type: 1}">Type 1</span> | 
  <span ng-click="myFilter = {type: 2}">Type 2</span> |
  <span ng-click="myFilter = {type: 3}">Type 3</span> |
  <!-- multiple filter - not working -->
  <span ng-click="myFilter = myFunction">Types 1 & 3</span> |
  <span ng-click="myFilter = null">No filter</span>
  <ul >
    <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'}, {type:3, name: 'Daniel'}];
            $scope.myFunction = function(val) {

            return (val.type != 2);
            };
        }

詳細については、こちらの AngularJS ドキュメントを参照してくださいhttp://docs.angularjs.org/api/ng/filter/filter

于 2014-02-24T03:48:23.520 に答える