92

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

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

4

3 に答える 3

175

次のように使用できます: 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;
  };
};
于 2013-05-10T09:44:43.903 に答える
2

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 を返します。

お役に立てれば。

于 2015-05-07T09:07:01.610 に答える
-1

さらに、コントローラーで同じようにフィルターを使用する場合は、次のようにします。

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

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

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');
于 2015-03-17T16:15:52.523 に答える