AngularJS自定义滤镜功能(AngularJS custom filter function)

在我的控制，我想过滤对象的数组。这些对象的每一个地图可以包含字符串以及列表

我试着使用$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:

您可以使用它像这样： 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;
  };
};

Answer 2:

这里有一个如何你会用一个例子filter你的AngularJS在JavaScript中（而不是在一个HTML元素）。

在这个例子中，我们有国家的记录，每一个包含名称的数组和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。

希望这可以帮助。

Answer 3:

此外，如果你想使用的过滤器在你的控制器以同样的方式你在这里做到这一点：

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

你可以这样做：

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

文章来源: AngularJS custom filter function