带复选框的角度过滤器答案

【问题标题】：Angular Filter with checkboxes带复选框的角度过滤器
【发布时间】：2015-02-16 11:40:22
【问题描述】：

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

我的 tr 行如下

<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) > -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 = [];
     }
 }

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

【问题讨论】：

需要对您所追求的最终结果 UI 进行更清晰的描述。努力去理解你所追求的细微差别。

标签： angularjs

【解决方案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

【讨论】：

感谢此解决方案的帮助！

【解决方案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;

}

【讨论】：