1. ホーム
  2. javascript

AngularJSでフィルタ内のパラメータを使用するには?

2023-09-09 14:37:50

質問

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')">

しかし、それは動作しません。どうすればいいのでしょうか?

どのように解決するのですか?

UPDATEしてください。 ドキュメントをよく見ていなかったのだと思いますが、確かに フィルタ をこの構文で使うことができます ( このフィドル を参照) を使って、オブジェクトのプロパティでフィルタリングすることができます。

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


これが誰かの助けになればと思い、私のオリジナルの回答です。

を使用して フィルタ フィルタを使う場合、パラメータを渡すことはできませんが、少なくとも2つのことができます。

1) スコープ変数にフィルタリングしたいデータをセットし、フィルタリング関数でそれを参照する。 このフィドル .

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) 新しいフィルタを作成し、パラメータに このフィドル .

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 プロパティがあることを想定しています。次のように読むことができます。 この を参照してください。