AngularJS 自定义过滤功能

Posted 2023-02-27

【中文标题】AngularJS 自定义过滤功能

【英文标题】：AngularJS custom filter function

【发布时间】：2013-05-04 15:44:32

【问题描述】：

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

我尝试使用$filter('filter')(array, function) 格式，但我不知道如何访问函数内数组的各个元素。这是一个显示我想要的东西的 sn-p。

$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')。到目前为止，我在网上找到的所有示例都在函数内部进行了静态条件搜索，它们不传递条件对象并针对数组中的每个项目进行测试。

【问题讨论】：

为什么需要过滤器？通常从模板中使用过滤器。如果你只是从那里使用它，你能不能在你的控制器中只拥有一个普通的功能？

而不是手动遍历数组的每个元素，我认为我们可以使用 angular 的 $filter('filter') 功能（如果我们只指定谓词函数）

【参考方案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;
  ;
;

【讨论】：

我不会使用 html 中的这个 criteriaMatch 函数。我将如何从控制器内部调用它是正确的吗？ $filter('filter')(array, function() return criteriaMatch(item, criteria); );

如果您没有在模板中使用它，定义过滤器不会给您带来任何好处。您可以简单地定义一个简单的 javascript 函数，因为它在那里更短。您可以在 Array 对象中使用原生 filter 方法：array.filter(function(item)return item.name === criteria.name;)

我确实有一个javascript函数。只是想确保 Angular 没有更简单的方法。我会接受你的回答。谢谢。

【参考方案2】：

这是一个示例，说明如何在 AngularJS JavaScript 中（而不是在 HTML 元素中）使用 filter。

在本例中，我们有一组 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。

希望这会有所帮助。

【参考方案3】：

另外，如果你想在你的控制器中使用过滤器，就像你在这里做的一样：

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

你可以这样做：

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

【讨论】：

或者，var filteredItems = $filter('criteriaMatch')(items, criteria);