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

我尝试在ng-grid的列标题中实现复选框。其目的是为了能够检查或取消选中给定列中的所有复选框。由于我想在将来有多个这样的列，我不想使用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; 
    }; 
});

来源

2014-10-10 delijah

我不知道有足够的了解网格知道为什么，但如果你打印出“检查器”值，你可以看到点击它不会改变它的价值。就像它没有正确绑定。对不起，我不能帮助那是为什么，但也许你可以从那里开始。 – Scott 2014-10-10 18:16:30

没错，但我真的没有找到如何使绑定工作.. – delijah 2014-10-15 07:45:39

我认为这是你在找什么：

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

你有一个 '点' 的问题。我让checker成为一个对象，以便在更改值时，模型不会断开。

<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

来源

2014-10-16 19:05:39 lmyers

很酷，这工作。非常感谢你，也为视频。很有意思！ – delijah 2014-10-17 08:31:23

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

回答

相关问题