Question

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

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

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

重现的步骤：

在plunker上运行脚本
检查网格行中的每个复选框（不是标题行中的复选框）
你会看到，标题复选框将被自动检查（这就是我想要的）
单击标题
重复步骤2，结果将不同（如步骤3）

有人能解释我在这里发生了什么吗？也许我做错了，也许这是一个错误？

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;
    };
});

Answer 1

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

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

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

1 个答案: