创建返回对象的自定义 Angular 过滤器答案

【问题标题】：Create custom Angular filter that returns an object创建返回对象的自定义 Angular 过滤器
【发布时间】：2016-06-29 14:03:06
【问题描述】：

有没有办法创建一个返回对象的custom angular filter function？

我从文档中了解到 filter: 可以将对象作为表达式。例如，以下将只使用名称为 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>

Javascript

  $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/

【问题讨论】：

标签： javascript angularjs object filter

【解决方案1】：

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

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

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

这似乎至少在 jsfiddle 中有效。

【讨论】：