75

ng-repeat でいくつかの配列を反復するときに、フィルターでパラメーターを使用したい

例：

HTML 部分:

<tr ng-repeat="user in users | filter:isActive">

JavaScript 部分:

$scope.isActive = function(user) {
    return user.active === "1";
};

しかし、次のようなフィルターを使用できるようにしたい

<tr ng-repeat="user in users | filter:isStatus('4')">

しかし、うまくいきません。どうすればそのようなことができますか？

4

5 に答える 5

122

更新:ドキュメントを十分に見ていないと思いますが、この構文 (このフィドルを参照) でフィルターフィルターを使用して、オブジェクトのプロパティでフィルター処理することは間違いありません。

<tr ng-repeat="user in users | filter:{status:4}">

それが誰かを助ける場合に備えて、これが私の元の答えです：

フィルターフィルターを使用すると、パラメーターを渡すことができなくなりますが、できることは少なくとも 2 つあります。

1) スコープ変数でフィルター処理するデータを設定し、この fiddleのようなフィルター関数でそれを参照します。

JavaScript:

$scope.status = 1;
$scope.users = [{name: 'first user', status: 1},
                {name: 'second user', status: 2},
                {name: 'third user', status: 3}];

$scope.isStatus = function(user){
    return (user.status == $scope.status);
};

HTML:

<li ng-repeat="user in users | filter:isStatus">

また

2)この fiddleのようなパラメーターを受け取る新しいフィルターを作成します。

JavaScript:

var myApp = angular.module('myApp', []);
myApp.filter('isStatus', function() {
  return function(input, status) {
    var out = [];
      for (var i = 0; i < input.length; i++){
          if(input[i].status == status)
              out.push(input[i]);
      }      
    return out;
  };
});

HTML:

<li ng-repeat="user in users | isStatus:3">

このフィルターはstatus、配列内のオブジェクトにプロパティがあることを前提としているため、再利用性が低下する可能性がありますが、これは単なる例です。フィルターの作成の詳細については、こちらを参照してください。

于 2012-08-16T23:56:50.703 に答える
52

この質問は、私が既に回答したangularjs フィルターへの引数の受け渡しとほぼ同じです。しかし、人々が見ることができるように、ここにもう1つの回答を投稿します。

実際には、Angular のネイティブ 'フィルター' フィルターを使用してカスタム フィルターに引数を渡すことができる別の (おそらくより良い解決策) があります。

次のコードを検討してください。

    <li ng-repeat="user in users | filter:byStatusId(3)">
        <span>{{user.name}}</span>
    <li>

これを機能させるには、フィルターを次のように定義するだけです。

$scope.byStatusId = function(statusId) {
    return function(user) {
        return user.status.id == statusId;
    }
}

このアプローチは、オブジェクトの奥深くにネストされた値を比較できるため、汎用性が高くなります。

angular.jsフィルターの逆極性をチェックして、フィルターを使用した他の便利な操作にこれを使用する方法を確認してください。

于 2013-07-23T15:05:58.573 に答える
1

AngularJs カスタム フィルターを作成した場合は、複数のパラメーターをフィルターに送信できます。テンプレートでの使用法は次のとおりです。

{{ variable | myFilter:arg1:arg2...  }}

コントローラー内でフィルターを使用する場合、これを行う方法は次のとおりです

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2, ...);
})

例とオンラインデモがさらに必要な場合は、これを使用できます

AngularJs フィルターの例とデモ

于 2016-05-17T18:04:41.963 に答える
0

例私は以下のような学生リストを持っています:

$scope.students = [  
   { name: 'Hai', age: 25, gender: 'boy' },  
   { name: 'Hai', age: 30, gender: 'girl' },  
   { name: 'Ho', age: 25, gender: 'boy' },  
   { name: 'Hoan', age: 40, gender: 'girl' },  
   { name: 'Hieu', age: 25, gender: 'boy' }  
 ];

性別で生徒をフィルタリングして男の子にし、名前でフィルタリングしたい。

最初に、次のように「filterbyboy」という名前の関数を作成します。

$scope.filterbyboy = function (genderstr) {  
   if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
     return (genderstr = "")  
   else  
    return (genderstr = "boy");  
 };

説明: 名前をフィルターしない場合は、すべての生徒を表示します。それ以外の場合は、名前と性別を「男の子」として入力してフィルターします。

ここに完全な HTML コードとデモがあります AngularJs の例で and 演算子を使用する方法

于 2015-10-09T03:27:17.610 に答える