我可以使用对象方法来过滤 ng-repeat 吗？

Question

总的来说，我是 Angular 和 Javascript OOP 的新手。我希望构建一个可重用的角度组件，其中所有控件都可以绑定到 javascript 对象的实例。我遇到的一个奇怪行为是尝试使用 javascript 对象的方法过滤集合。

我有一个带有签名的方法 filterVisible 的对象：

this.filterVisible = function(item) 

当我尝试使用由该对象方法过滤的 ng-repeat 时：

ng-repeat="item in item1.items | filter: item1.filterVisible"

它似乎不起作用，但如果我将该对象方法包装在我的 $scope 中的一个方法中，如下所示：

$scope.filterVisible1 = function(item) {
  return ($scope.item1.filterVisible(item));
}

并将我的重复更改为：

ng-repeat="item in item1.items | filter: filterVisible1"

有效。

这有点令人困惑，所以我将其放入plunker。有人可以解释为什么使用范围方法的过滤器有效，但使用对象方法的过滤器不起作用吗？

Answer 1

正如您在文档中看到的，http://docs.angularjs.org/api/ng.filter:filter

{{ filter_expression | filter:expression:comparator }}

您可以将表达式与 filter 一起使用，该表达式用于评估所有属性针对范围进行评估，这与 JavaScript 中的表达式是针对全局窗口进行评估的 deccirbe在文档中，http://docs.angularjs.org/guide/expression。

因此，要提出的问题是

item1.filterVisible 在范围内定义？ vs. filterVisible1 是在范围内定义的？

字符串 "item1.filterVisible" 可由 Javascript 评估，但它不是 $scope.$eval() 方法的正确表达式。

为确保您的表达式正常工作，请在单击您的元素后在 chrome 控制台中运行以下命令。

angular.element($0).scope().$eval(<your expression>)

另外，我相信对象应该有有意义的方法名。在您的情况下，filterVisible 有点令人困惑。

-- 编辑--
事实证明，提供的代码都在 $scope 中定义。我发现有JS错误，这个错误可以修复。

  var _this = this;
  this.filterVisible = function(item) {
    return (Math.abs(_this.items.indexOf(item) - _this.selected_id) <= _this.limit);
  }