创建返回对象的自定义角度筛选器

Create custom Angular filter that returns an object

本文关键字：筛选 自定义 返回 对象 创建      更新时间：2023-09-26

有没有办法创建一个返回对象的自定义角度过滤器函数？

我从文档中了解到过滤器：可以将对象作为表达式。例如，以下对象将仅具有名称为Neil Diamond的对象：

<div ng-repeat="item in collection | filter:{'name':'Neil Diamond'}">

我试图过滤一个动态对象。我创建了一个函数来构建对象并返回它，但这不起作用。这是实现我的目标的专有方法吗？

.HTML

<input type="checkbox" ng-click="includeAudience('Clinicians')" /> Clinicians
<br>
<input type="checkbox" ng-click="includeAudience('ElderlyVeterans')" /> ElderlyVeterans
<ul>
  <li ng-repeat="resource in resources | filter:audienceFilter">
    {{resource.name}}
  </li>
</ul>

爪哇语

  $scope.resources = [{
    'name': 'Resource 1',
    'ElderlyVeterans': false,
    'Clinicians': true
  }, {
    'name': 'Resource 2',
    'ElderlyVeterans': true,
    'Clinicians': false
  }];
  $scope.audienceIncludes = [];
  $scope.includeAudience = function(resource) {
    var i = $.inArray(colour, $scope.audienceIncludes);
    if (i > -1) {
      $scope.audienceIncludes.splice(i, 1);
    } else {
      $scope.audienceIncludes.push(resource);
    }
  }
  $scope.audienceFilter = function(resource) {
    if ($scope.audienceIncludes.length > 0) {
      $scope.audiencesShown = {};
      angular.forEach($scope.audienceIncludes, function(audience) {
        $scope.audiencesShown[audience] = true;
      });
      return $scope.audiencesShown;
    }
    return resource;
  }
});

你可以在这里看到JSFiddle：http://jsfiddle.net/matthew_nahmias/5oqda19n/

这是因为您将函数作为原始对象提供。这意味着 angular 会将函数本身视为过滤器，而不是它的结果。你应该计算函数，像这样：

<li ng-repeat="resource in resources | filter:audienceFilter()">
  {{resource.name}}
</li>

（我在audienceFilter后添加了括号）。

这似乎至少在 jsfiddle 中有效。

相关文章：