Accessing ng-repeat alias expression in controller
I have a filtered list in a directive:
<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>
I want to access and edit a filtered list in a controller. However scope.filteredItems
- undefined
in the controller.
How do I pass a filtered array to a directive controller?
source to share
You will be able to get the filtered array by typing $filter
in your controller and using the following while setting up your custom filterfilter
$scope.filteredItems = $filter('filter')($scope.items)
This will include your new array using both filters filter
and limitTo
. Follow a simplified example to demonstrate this.
<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 - Working Example
source to share