ng-grid列标题中的多选复选框不起作用

时间:2014-10-10 12:48:42

标签: angularjs angular-ui ng-grid

我尝试在ng-grid的列标题中实现一个复选框。 这样做的目的是能够检查或取消选中给定列中的所有复选框。 由于我希望将来不止一个这样的列,我不想使用ng-grid的行选择复选框功能。

现在,如果您运行plunkr代码..如果您选中并取消选中行/数据部分中的复选框,则一切似乎都正常,这意味着:如果您选中所有复选框,则会检查标题中的复选框同样。

通过鼠标点击选中或取消选中标题中的复选框后,此功能不再有效。

重现的步骤:

  1. 在plunker上运行脚本
  2. 检查网格行中的每个复选框(不是标题行中的复选框)
  3. 你会看到,标题复选框将被自动检查(这就是我想要的)
  4. 单击标题
  5. 中的复选框,取消选中所有复选框
  6. 重复步骤2,结果将不同(如步骤3)
  7. 有人能解释我在这里发生了什么吗?也许我做错了,也许这是一个错误?

    http://plnkr.co/edit/toM7Lrhs1otcjnpjrLGW

    var app = angular.module('plunker', ['ngGrid']);
    
    app.controller('MainCtrl', function($scope) {
    
        $scope.gridData = [
            {
                "id": 0,
                "checker": false
            }, {
                "id": 1,
                "checker": true
            }, {
                "id": 2,
                "checker": true
            }
        ];
    
        $scope.columnDefs = [{
            field: 'checker',
            displayName: 'Checker',
            headerCellTemplate: "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\"> \
                <div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\"> \
                    {{col.displayName}} \
                    <input type=\"checkbox\" ng-model=\"checker\" ng-change=\"toggleCheckerAll(checker);\"> \
                </div> \
            </div>",
            cellTemplate: "<div class=\"ngCellText\" ng-class=\"col.colIndex()\"> \
                <input type=\"checkbox\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"toggleChecker(COL_FIELD)\"> \
            </div>"
        }];
    
        $scope.gridOptions = {
            data: 'gridData',
            enableCellSelection: false,
            enableRowSelection: false,
            columnDefs: 'columnDefs'
        };
    
        $scope.toggleCheckerAll = function(checked) {
            for (var i = 0; i < $scope.gridData.length; i++) {
                $scope.gridData[i].checker = checked;
            }
        };
    
        $scope.toggleChecker = function(checked) {
            var rows = $scope.gridOptions.$gridScope.renderedRows,
                allChecked = true;
    
            for (var r = 0; r < rows.length; r++) {
                if (rows[r].entity.checker !== true) {
                    allChecked = false;
                    break;
                }
            }
    
            $scope.gridOptions.$gridScope.checker = allChecked;
        };
    });
    

1 个答案:

答案 0 :(得分:2)

我认为这就是你要找的东西:

http://plnkr.co/edit/2hXm3ApM39e7YyyI79qb?p=preview

你遇到了'点'问题。我将检查器作为一个对象,这样当你更改了值时,模型就不会断开连接。

  <input type=\"checkbox\" ng-model=\"checker.checked\" ng-change=\"toggleCheckerAll(checker.checked);\"> \

并在你的toggleChecker中:

 if (!$scope.gridOptions.$gridScope.checker)
      $scope.gridOptions.$gridScope.checker = {};

    $scope.gridOptions.$gridScope.checker.checked = allChecked;

观看此视频以获得更好的解释: Angular Dot Problem Explained