[英]Using ng-repeat and filter, how to tell which items are visible?
I have an array of objects that I'm displaying in my Angular app using ng-repeat
. 我有一个对象数组,我正在使用
ng-repeat
在我的Angular应用程序中显示。 I'm filtering out items using filter
and the value of a search input. 我正在使用
filter
和搜索输入的值过滤掉项目。 It works as expected. 它按预期工作。 But, I have a "select all" / "deselect all" option and I only want to select the visibile items in the list (the ones that meet the current search criteria).
但是,我有一个“全选”/“取消全选”选项,我只想选择列表中的可见项(符合当前搜索条件的项目)。
Without performing the same logic in my controller (ie using indexOf
the search value on each of my objects), how can I tell which items are currently filtered out by ng-repeat
/ filter
? 如果不在我的控制器中执行相同的逻辑(即使用
indexOf
我的每个对象上的搜索值),如何判断哪些项目当前被ng-repeat
/ filter
过滤掉了?
My view: 我的看法:
<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>
A function in my controller: 我的控制器中的一个功能:
$scope.toggleAll() {
for(var i in $scope.items){
// how can I tell if this item is filtered out in the view?
}
}
I have significantly simplified my code samples here for simplicity since this question doesn't need much more detail. 为简单起见,我在这里大大简化了我的代码示例,因为这个问题不需要更多细节。 Is there a way to do what I'm thinking or do I need to perform the "search" again?
有没有办法做我正在思考或做的事情我需要再次执行“搜索”?
You can bind the filtered array to another scope variable in your view, then access that in your controller. 您可以将过滤后的数组绑定到视图中的另一个范围变量,然后在控制器中访问该变量。
View: 视图:
<tr ng-repeat="item in filteredItems = (items | filter:searchValue)">
...
</tr>
Controller: 控制器:
$scope.toggleAll = function () {
angular.forEach($scope.filteredItems, function (item) {
// do stuff
})
}
Your issue is that ng-repeat is scope isolated. 您的问题是ng-repeat是范围隔离的。 As a result you can't refer to the internal list that is being managed by ng-repeat from your controller/directive.
因此,您无法从控制器/指令引用由ng-repeat管理的内部列表。
As a result there are 2 options 因此有2种选择
Bind the filtered list to ng-repeat from your controller/directive, so you maintain the filtered list. 将过滤后的列表绑定到控制器/指令的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>
Perform the filter again in your controller/directive 在控制器/指令中再次执行过滤器
$scope.toggleAll() { var items = $filter('yourFilter')($scope.items, $scope.searchText); for(var i in items){ //set your selected property } }
Angular filters create a new array. 角度过滤器创建一个新数组。 So in order to perform an action on the filtered items you're going to have to capture the new array.
因此,为了对已过滤的项执行操作,您必须捕获新数组。
Something like: 就像是:
$scope.toggleAll() {
var filteredItems = $filter('filter')($scope.items, $scope.searchValue);
for(var i in filteredItems) {
...
}
}
If you don't want to filter twice you'll have to filter the array yourself every time searchValue
changes and ng-repeat
over that filtered array, ng-change is useful in that case. 如果您不想过滤两次,则每次
searchValue
更改并对该过滤后的数组进行ng ng-repeat
时,您必须自己过滤数组,在这种情况下, ng-change非常有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.