92

在我的控制器内部，我想过滤一组对象。这些对象中的每一个都是一个可以包含字符串和列表的映射

我尝试使用$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在 AngularJS JavaScript 中使用的示例（而不是在 HTML 元素中）。

在此示例中，我们有一组 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 回答