AngularJS自定义过滤功能

时间:2013-05-10 02:10:36

标签: arrays angularjs filter controller

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

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

3 个答案:

答案 0 :(得分:165)

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

答案 1 :(得分:2)

以下是您在AngularJS JavaScript中使用with open('times.txt', 'w') as times: # all code that needs to write to times (而不是HTML元素)的示例。

在这个例子中,我们有一个国家记录数组,每个记录包含一个名称和一个3字符的ISO代码。

我们想编写一个函数,在这个列表中搜索与特定3字符代码匹配的记录。

以下是我们如何在没有的情况下使用filter

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]; }; 返回一个数组作为结果(匹配记录列表),因此在本例中,我们要么返回1条记录,要么返回NULL。

希望这有帮助。

答案 2 :(得分:0)

此外,如果您想在控制器中使用过滤器,请按照与此相同的方式使用过滤器:

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

您可以执行以下操作:

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