web-dev-qa-db-ja.com

AngularJSカスタムフィルター関数

コントローラー内で、オブジェクトの配列をフィルター処理したいと思います。これらの各オブジェクトは、リストだけでなく文字列も含むことができるマップです

$filter('filter')(array, function)形式を使用しようとしましたが、関数内の配列の個々の要素にアクセスする方法がわかりません。ここに私が欲しいものを示すスニペットがあります。

$filter('filter')(array, function() {
  return criteriaMatch(item, criteria);
});

そして、criteriaMatch()で、個々のプロパティのそれぞれが一致するかどうかをチェックします

var criteriaMatch = function(item, criteria) {
  // go thro each individual property in the item and criteria
  // and check if they are equal
}

これらすべてをコントローラーで実行し、リストのリストをコンパイルして、スコープに設定する必要があります。したがって、この方法でのみ$filter('filter')にアクセスする必要があります。これまでにネットで見つけたすべての例では、関数内で静的な条件検索が行われています。それらは条件オブジェクトを渡さず、配列内の各アイテムに対してテストします。

arraysangularjsfiltercontroller
85
user2368436

次のように使用できます。 http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

あなたが見つけたように、filterは配列から項目ごとに受け入れる述語関数を受け入れます。したがって、指定されたcriteriaに基づいて述語関数を作成する必要があります。

この例では、criteriaMatchは、指定されたcriteriaに一致する述語関数を返す関数です。

テンプレート：

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

範囲：

$scope.criteriaMatch = function( criteria ) {
  return function( item ) {
    return item.name === criteria.name;
  };
};
168
Tosh

AngularJS JavaScript内で（HTML要素ではなく）filterを使用する方法の例を次に示します。

この例では、それぞれが名前と3文字のISOコードを含むCountryレコードの配列があります。

特定の3文字コードに一致するレコードをこのリストから検索する関数を作成します。

方法は次のとおりですwithoutを使用してfilter：

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.
    for (var i = 0; i < $scope.CountryList.length; i++) {
        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {
            return $scope.CountryList[i];
        };
    };
    return null;
};

うん、それで何も悪いことはありません。

しかし、filterを使用して、同じ関数がどのように見えるかを以下に示します。

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.

    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })

    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.
    if (matches.length == 0)
        return null;

    //  Otherwise, it should've found just one matching record
    return matches[0];
};

ずっときれい。

filterは結果として配列（一致するレコードのリスト）を返すため、この例では、1つのレコードまたはNULLを返します。

お役に立てれば。

2
Mike Gledhill

また、ここで行うのと同じ方法でコントローラーでフィルターを使用する場合：

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

次のようなことができます：

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');
0
cafesanu