[英]Using ng-repeat and filter, how to tell which items are visible?
我有一个对象数组,我正在使用ng-repeat
在我的Angular应用程序中显示。 我正在使用filter
和搜索输入的值过滤掉项目。 它按预期工作。 但是,我有一个“全选”/“取消全选”选项,我只想选择列表中的可见项(符合当前搜索条件的项目)。
如果不在我的控制器中执行相同的逻辑(即使用indexOf
我的每个对象上的搜索值),如何判断哪些项目当前被ng-repeat
/ filter
过滤掉了?
我的看法:
<input type="text" ng-model="searchValue">
<input type="checkbox" ng-model="checkAll" ng-change="toggleAll()">
<tr ng-repeat="item in items | filter:searchValue">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
我的控制器中的一个功能:
$scope.toggleAll() {
for(var i in $scope.items){
// how can I tell if this item is filtered out in the view?
}
}
为简单起见,我在这里大大简化了我的代码示例,因为这个问题不需要更多细节。 有没有办法做我正在思考或做的事情我需要再次执行“搜索”?
您可以将过滤后的数组绑定到视图中的另一个范围变量,然后在控制器中访问该变量。
视图:
<tr ng-repeat="item in filteredItems = (items | filter:searchValue)">
...
</tr>
控制器:
$scope.toggleAll = function () {
angular.forEach($scope.filteredItems, function (item) {
// do stuff
})
}
您的问题是ng-repeat是范围隔离的。 因此,您无法从控制器/指令引用由ng-repeat管理的内部列表。
因此有2种选择
将过滤后的列表绑定到控制器/指令的ng-repeat,以便维护过滤后的列表。
//in your controller $scope.filteredItems = $filter('yourFilter')($scope.items,$scope.searchText); $scope.$watch('searchText', function(newValue){ $scope.filteredItems = $filter('yourFilter')($scope.items, newValue); }); //in your view <tr ng-repeat="item in filteredItems"> <td>{{item.id}}</td> <td>{{item.name}}</td> </tr>
在控制器/指令中再次执行过滤器
$scope.toggleAll() { var items = $filter('yourFilter')($scope.items, $scope.searchText); for(var i in items){ //set your selected property } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.