angularjs - Angularjs过滤并选择所有复选框

Question

我有一系列要展示的项目

<tr ng-repeat="i in items | filter:search_text" ...>

这些项目有一个复选框，表示“选中”或未选中。当我需要执行诸如调用将删除所有选定项目的删除函数之类的操作时，如何知道过滤器显示了哪些项目？

已选择（在复选框中选中）然后通过过滤隐藏的项目仍被选中。我需要一种方法来知道当前屏幕上的项目。

Answer 1

您可以使用 $filter 在控制器中调用过滤器。

app.controller('MyCtrl', function($scope, $filter){ 
   var filter = $filter('filter');

   $scope.items = [/* your items here */]

   $scope.selectAllFilteredItems = function (){
      var filtered = filter($scope.items, $scope.search_text);

      angular.forEach(filtered, function(item) {
         item.selected = true;
      });
   };
});

然后，您将调用selectAllFilteredItems()ng-click 或您需要的任何其他位置。

Answer 2

不是真的超级抛光，但它的工作原理。

在您的控制器中

var filter = $filter('filter');
$scope.item_ids = [];
$scope.selectAllFilteredItems = function (){
    var filtered = filter($scope.items, $scope.searchText);
    angular.forEach(filtered, function(item, key) {
        if($scope.item_ids.indexOf(item.id) == -1){
            $scope.item_ids.push(item.id);
            $scope.items[key].selected = true;
        }else{
            $scope.item_ids.splice($scope.item_ids.indexOf(item.id),1);
            $scope.items[key].selected = false;
        }
    });
};

然后在表格中，您有一个复选框来全选或取消全选。

<table class='table table-striped'>
    <tr>
        <th><input type="checkbox" ng-click="selectAllFilteredItems()"></th>
    </tr>
    <tr ng-repeat="item in items | filter:searchText">
        <td><input type="checkbox" ng-model="item.selected"></td>
    </tr>
</table>