javascript - 在 Controller 中访问 ng-repeat 别名表达式

Question

我在指令中有一个过滤列表:

<div ng-repeat="item in items | filter:filter | limitTo:5 as filteredItems">
    <div ng-bind="item.title"></div>
</div>
<div><span ng-bind="filteredItems.length"></span> items</div>

我希望访问和操作指令 Controller 中的过滤列表。但是 scope.filteredItems 在 Controller 中是 undefined。

如何将过滤后的数组传递给指令的 Controller ？

Answer 1

您可以通过将 $filter 注入(inject)您的 Controller 并利用以下内容来获取您的过滤数组，以您的自定义过滤器为目标 filter

$scope.filteredItems = $filter('filter')($scope.items)

这将包括您的新数组，同时应用了 filter 和 limitTo 过滤器。观察这个简单的例子来证明这一点

<span ng-bind="filteredItems.length"></span><!-- 2 -->
<div class="item" ng-repeat="item in items | filter | limitTo: 2 as filteredItems"></div>

---

app.filter('filter', function() {
    return function(input) {
        return input.slice(0, 4); // 4 items - initial filter
   };
})

app.controller('ctrl', ['$scope', '$filter', function($scope, $filter) {
    $scope.items = [
        {'key': 'A', 'value': 0},
        {'key': 'B', 'value': 1},
        {'key': 'C', 'value': 2},
        {'key': 'D', 'value': 3},
        {'key': 'E', 'value': 4},
        {'key': 'F', 'value': 5},
        {'key': 'G', 'value': 6},
        {'key': 'H', 'value': 7}
    ];

    $scope.filteredItems = $filter('filter')($scope.items) // 2 items - compound filter
}]);

JSFiddle Link - 工作示例