ngRepeat 对象的高级 AngularJS 自定义过滤答案

【问题标题】：Advanced AngularJS custom filtering on ngRepeat objectsngRepeat 对象的高级 AngularJS 自定义过滤
【发布时间】：2013-06-11 16:12:06
【问题描述】：

我想实现如下理论代码：

VIEW.html

<li ng-repeat="player in players | filter:myCustomFilter(player)">{{player.name}}

CONTROLLER.js

// some theoretical conditional statement that return a boolean
$scope.otherCondition = true;


$scope.myCustomFilter = function(player) {
    return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}

所以我希望将所有播放器加载到 Angular 模型中，但我只想将播放器渲染到名称以字母“A”开头的 DOM 中。当我尝试做这样的事情时，我的控制台通知我 player 未定义。我是否需要编写自定义过滤器才能实现此目的（通过angular.module().filter()）？

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

您不需要将播放器传递给过滤器

<li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}

应该有效

【讨论】：

【解决方案2】：

这是一个有效的小提琴：http://jsfiddle.net/orlenko/jV6DK/

Html 代码（完全按照 Karl Zilles 的建议）：

<div ng-app>
    <div ng-controller="MyController">
        <h2>Names starting with "A":</h2>
        <ul>
            <li ng-repeat="player in players | filter:myCustomFilter">{{player.name}}</li>
        </ul>
        <h2>All Names:</h2>
        <ul>
            <li ng-repeat="player in players">{{player.name}}</li>
        </ul>
    </div>
</div>

Javascript：

function MyController($scope) {
    $scope.players = [{
        name: 'Arthur'        
    }, {
        name: 'William'
    }, {
        name: 'Bertha'
    }, {
        name: 'Alice'
    }];

    $scope.otherCondition = true;

    $scope.myCustomFilter = function(player) {
        return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
    }
}

Result

【讨论】：

如果我们想再向过滤器传递 1 个参数怎么办？

【解决方案3】：

给出的答案只是部分正确，如果您需要向函数传递更多参数，则需要创建一个闭包并将这些参数传递给闭包，如下所示：

'A' 传递给闭包，player 作为上下文的一部分传递。

HTML：

<div ng-app>
    <div ng-controller="MyController">
        <h2>Names starting with "A":</h2>
        <ul>
            <li ng-repeat="player in players | filter:myCustomFilter('A')">{{player.name}}</li>
        </ul>
        <h2>All Names:</h2>
        <ul>
            <li ng-repeat="player in players">{{player.name}}</li>
        </ul>
    </div>
</div>

JS：

function MyController($scope) {
  $scope.players = [{
    name: 'Arthur'
  }, {
    name: 'William'
  }, {
    name: 'Bertha'
  }, {
    name: 'Alice'
  }];

  $scope.otherCondition = true;

  $scope.myCustomFilter = function(letter) {
    return function(player) {
      var rgxp = new RegExp(letter, "g");
      return player.name.substring(0, 1).match(rgxp) && $scope.otherCondition;
    }
  } 

}

Checkout a working jsfiddle

【讨论】：