使用 ng-repeat 和 filter，如何判断哪些项目是可见的？

Question

我有一组对象，我使用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?
     }
}

为了简单起见，我在这里大大简化了我的代码示例，因为这个问题不需要更多细节。有没有办法做我在想的事情，还是我需要再次执行“搜索”？

Answer 1

您可以将过滤后的数组绑定到视图中的另一个范围变量，然后在控制器中访问它。

查看：

<tr ng-repeat="item in filteredItems = (items | filter:searchValue)">
  ...
</tr>

控制器：

$scope.toggleAll = function () {
  angular.forEach($scope.filteredItems, function (item) {
    // do stuff
  })
}

Answer 2

您的问题是 ng-repeat 是范围隔离的。因此，您无法从控制器/指令中引用由 ng-repeat 管理的内部列表。

因此有 2 个选项

1. 将过滤后的列表绑定到控制器/指令中的 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>
   

2. 在您的控制器/指令中再次执行过滤器

   $scope.toggleAll() {
       var items = $filter('yourFilter')($scope.items, $scope.searchText);
       for(var i in items){
          //set your selected property
       }
   }
   

Answer 3

Angular 过滤器创建 a new array. 因此，为了对过滤后的项目执行操作，您必须捕获新数组。

类似：

$scope.toggleAll() {
  var filteredItems = $filter('filter')($scope.items, $scope.searchValue);
  for(var i in filteredItems) {
    ...
  }
}

如果您不想过滤两次，则必须在每次 searchValue 更改和 ng-repeat 在该过滤后的数组上时自己过滤数组，ng-change 在这种情况下很有用。