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

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

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

$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')この方法でのみアクセスする必要があります。これまでにネットで見つけたすべての例では、関数内に静的基準検索があり、基準オブジェクトを渡さず、配列内の各項目に対してテストしていません。

次のように使用できます：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;
  };
};

これfilterは、（HTML要素ではなく）AngularJS JavaScript内での使用例です。

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

このリストを検索して、特定の3文字のコードに一致するレコードを検索する関数を記述します。

以下に、使用せずにそれを行う方法を示します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を返すようにしたいでしょう。

お役に立てれば。

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

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

あなたは次のようなことをすることができます：

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