如何使过滤器附加到控制器的 $scope（角度）？答案

【问题标题】：How to make a filter attached to $scope of a controller (angular)?如何使过滤器附加到控制器的 $scope（角度）？
【发布时间】：2016-12-03 12:54:16
【问题描述】：

我使用 ui-select 在 Angular 中编写了一个小程序。我还编写了一个过滤器，可以在不同的字段中进行 OR 搜索。

这是我的原始过滤器：（效果很好）

app.filter('orSearchFilter', function($parse) {
return function(items, props) {
  var out = [];

  if (angular.isArray(items)) {
    var keys = Object.keys(props);

    items.forEach(function(item) {
      var itemMatches = false;

      for (var i = 0; i < keys.length; i++) {
        var prop = $parse(keys[i])(item);
        var text = props[keys[i]].toLowerCase();

        if (prop && prop.toString().toLowerCase().indexOf(text) !== -1) {
          itemMatches = true;
          break;
        }
      }

      if (itemMatches) {
        out.push(item);
      }
    });
  } else {
    out = items;
  }

  return out;
};
});

这是我原来的 plunker（有效）：http://plnkr.co/edit/IdqO5dtLXmC6gtqLxRdP?p=preview

问题是我的过滤器不是通用的，我将在其控制器内部的最终代码中使用它。所以，我想附上它。

这是附加到控制器的过滤器的新版本：（我没有做任何更改...）

  $scope.orSearchFilter = function($parse) {
    return function(items, props) {
      var out = [];

      if (angular.isArray(items)) {
        var keys = Object.keys(props);

        items.forEach(function(item) {
          var itemMatches = false;

          for (var i = 0; i < keys.length; i++) {
            var prop = $parse(keys[i])(item);
            var text = props[keys[i]].toLowerCase();

            if (prop && prop.toString().toLowerCase().indexOf(text) !== -1) {
              itemMatches = true;
              break;
            }
          }

          if (itemMatches) {
            out.push(item);
          }
        });
      } else {
        out = items;
      }

      return out;
    };
  };

最后，在我的 html 中，我使用这一行调用了这个新过滤器：

    <ui-select-choices group-by="groupByLetter" 
repeat="contract in (contracts |
filter : orSearchFilter(contracts, {id.id: $select.search, policy.info.name : $select.search } )  |
orderBy: 'name') track by contract.name">
      {{contract.name}} - {{contract.value}} ---- {{contract.id.id}} *** {{contract.policy.info.name }}
</ui-select-choices>

您能帮我解决这个问题并帮我将此过滤器附加到控制器的范围吗？

谢谢！

【问题讨论】：

你这样做的用例是什么？这很奇怪
只是不要让它成为一个通用的过滤器（因为我已经知道我只会使用它几次并且只在控制器内部使用）。这就是为什么我想将它附加到控制器的范围！
恕我直言，这没有多大意义，您已经拥有可以在模板{{ whatever | orSearchFilter:searchObject}} 或javascript $filter('orSearchFilter')(whatever, searchObject) 中轻松访问的过滤器，并且在控制器中添加一些额外的逻辑只会污染代码用一些不必要的东西。

标签： angularjs filter

【解决方案1】：

使用$filter service 以编程方式获取您的过滤器函数。

//Don't forget to inject $filter in your controller ofcourse
$scope.orSearchFilter = $filter('orSearchFilter');

【讨论】：

问题不是在javascript端使用过滤器，而是在html端......
@salamanka44 您已经在示例中的视图中使用它了吗？

【解决方案2】：

将过滤器直接附加到范围：

/* REMOVE constructor function
  $scope.orSearchFilter = function($parse) {
    return function(items, props) {
*/
// INSTEAD
  $scope.orSearchFilter = function(items, props) {
      var out = [];

      //...

      return out;
    };
//};

当然，还要确保将$parse添加到控制器构造函数的可注入对象中。

【讨论】：