Question

我有一个启用了多选的ui-grid。一切正常，除非数据发生变化，＆＃34;选择＆＃34;标题中的列未正确显示网格的状态。我创建了simple example in plunker来说明问题。要重现，只需单击选择标题按钮。

然后点击＆＃34;添加数据＆＃34;按钮。

请注意，标题仍显示复选标记，但未选中新添加的行。

    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.swapData = function() {
    if ($scope.gridOpts.data === data1) {
      $scope.gridOpts.data = data2;
      $scope.gridOpts.columnDefs = columnDefs2;
    }
    else {
      $scope.gridOpts.data = data1;
      $scope.gridOpts.columnDefs = columnDefs1;
    }
  };

  $scope.addData = function() {
    var n = $scope.gridOpts.data.length + 1;
    $scope.gridOpts.data.push({
                "firstName": "New " + n,
                "lastName": "Person " + n,
                "company": "abc",
                "employed": true,
                "gender": "male"
              });
  };

  $scope.removeFirstRow = function() {
    //if($scope.gridOpts.data.length > 0){
       $scope.gridOpts.data.splice(0,1);
    //}
  };

  $scope.reset = function () {
    data1 = angular.copy(origdata1);
    data2 = angular.copy(origdata2);

    $scope.gridOpts.data = data1;
    $scope.gridOpts.columnDefs = columnDefs1;
  }

  var columnDefs1 = [
    { name: 'firstName' },
    { name: 'lastName' },
    { name: 'company' },
    { name: 'gender' }
  ];

  var data1 = [
    {
      "firstName": "Cox",
      "lastName": "Carney",
      "company": "Enormo",
      "gender": "male"
    },
    {
      "firstName": "Lorraine",
      "lastName": "Wise",
      "company": "Comveyer",
      "gender": "female"
    },
    {
      "firstName": "Nancy",
      "lastName": "Waters",
      "company": "Fuelton",
      "gender": "female"
    },
    {
      "firstName": "Misty",
      "lastName": "Oneill",
      "company": "Letpro",
      "gender": "female"
    }
  ];

  var origdata1 = angular.copy(data1);

  var columnDefs2 = [
    { name: 'firstName' },
    { name: 'lastName' },
    { name: 'company' },
    { name: 'employed' }
  ];

  var data2 = [
    {
      "firstName": "Waters",
      "lastName": "Shepherd",
      "company": "Kongene",
      "employed": true
    },
    {
      "firstName": "Hopper",
      "lastName": "Zamora",
      "company": "Acium",
      "employed": true
    },
    {
      "firstName": "Marcy",
      "lastName": "Mclean",
      "company": "Zomboid",
      "employed": true
    },
    {
      "firstName": "Tania",
      "lastName": "Cruz",
      "company": "Marqet",
      "employed": true
    },
    {
      "firstName": "Kramer",
      "lastName": "Cline",
      "company": "Parleynet",
      "employed": false
    },
    {
      "firstName": "Bond",
      "lastName": "Pickett",
      "company": "Brainquil",
      "employed": false
    }
  ];

  var origdata2 = angular.copy(data2);

  $scope.gridOpts = {
    columnDefs: columnDefs1,
    data: data1,
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35
  };

}]);

Answer 1

我已经解决了这个问题，请参考：http://plnkr.co/edit/lJsWof?p=preview

这是强调点

$scope.gridApi.selection.clearSelectedRows();

检查或取消选中所有行的步骤

获取网格对象

$scope.gridOpts.onRegisterApi = function(gridApi) 
{
    $scope.gridApi = gridApi;
};

调用theire方法清除行

$scope.gridApi.selection.clearSelectedRows()

请参阅此http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi

当数据发生变化时，AngularJS ui-grid不会更新选择所有状态

1 个答案: