Question

我有一个表格，每行都有一个复选框。

我的行如下

<tr ng-repeat="row in rows | filter:searchFilter" >

每行中的复选框如下

<input type="checkbox"  value="{{row.id}}" ng-checked="selection.indexOf(row.id) > -1" ng-click="toggleSelection(row.id)" class="chosenRouteCheckbox">

我的输入文字如下

<input type="text" ng-model="searchFilter"/>

我有一个行ID的数组来跟踪，以确保它们在数组中被检查，解释了为什么我使用indexOf（row.id）＆gt;输入复选框中的-1。

但是，当我在输入文本中键入内容时，它会正确显示已过滤的结果，但是当我单击检查所有输入复选框的按钮时，它不会仅检查已过滤的复选框，而是检查所有输入复选框

我检查所有html如下

<a class="btn btn-info pull-right" style="cursor:pointer" ng-click="checkAllRows()" ng-show="all_rows_checked == false">Check All Rows</a>
<a class="btn btn-info pull-right" style="cursor:pointer" ng-click="checkAllRows()" ng-show="all_rows_checked == true">Uncheck All Rows</a>

我的支票全部功能如下

 $scope.checkAllRows = function () {
     $scope.all_rows_checked = !$scope.all_rows_checked;
     if ($scope.all_rows_checked == true) {
         for (var i = 0; i < $scope.rows.length; i++) {
             $scope.selection.push($scope.rows[i].id);
         }
     } else {
         $scope.selection = [];
     }
 }

如果有人可以帮助我，请提前致谢！

Answer 1

您需要将过滤后的数组保存在另一个变量中，并在checkAllRows函数中使用此简化数组来确定是否需要检查当前row：

$scope.checkAllRows = function() {
    $scope.all_rows_checked = !$scope.all_rows_checked;
    if ($scope.all_rows_checked) {
        for (var i = 0; i < $scope.rows.length; i++) {
            if ($scope.filtered.indexOf($scope.rows[i]) > -1) {
                $scope.selection.push($scope.rows[i].id);    
            }
        }
    } else {
        $scope.selection = [];
    }
}

HTML：

<tr ng-repeat="row in filtered = (rows | filter:searchFilter)">

演示： http://plnkr.co/edit/EQKojsUV8yUqKKUaTq1N?p=preview

Answer 2

如果您需要检查所有复选框，那么为什么不在每行写入输入复选框，如下所示：

<input type="checkbox"  value="{{row.id}}" ng-checked="all_rows_checked == true" ng-click="toggleSelection(row.id)" class="chosenRouteCheckbox">

在checkAllRows函数中，只需执行以下操作：

$scope.checkAllRows = function(){
    $scope.all_rows_checked = !$scope.all_rows_checked;

}

带有复选框的角度过滤器

2 个答案: