AngularJSカスタムフィルター機能

Question

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

$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')にアクセスする必要があります。今までネットで見つかったすべての例では、関数内で静的な条件の検索が行われていましたが、配列の各項目に対して条件オブジェクトとテストを渡すことはありません。

Answer 1

あなたはこのようにそれを使用することができます：あなたはfilterは、配列から項目によってアイテム を受け入れる述語機能を受け入れ、見つけた http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

。 したがって、指定された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; 
    }; 
}; 

Answer 2

また、あなたはここでそれを実行します。

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

ます

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

Answer 3

filterを（HTML要素ではなく）AngularJS JavaScript内でどのように使用するかの例を示します。

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

このリストを検索して、特定の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を返します。

これが役に立ちます。