AngularJS用户界面不更新选择数据更改时的所有状态

我有一个启用了多选的UI网格。一切工作正常，除了数据改变时，标题中的“选择”列不能正确显示网格的状态。我创建了一个说明此问题的simple example in plunker。要重现，只需点击选择标题按钮。AngularJS用户界面不更新选择数据更改时的所有状态

然后点击 “添加数据” 按钮。

注意，头仍显示复选标记，但没有被选中新添加的行。

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

}]);

来源

2017-02-22 wholladay

我已经解决了的问题，请参见本：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

来源

2017-02-22 14:00:48

感谢您的回答，但是这不是一个可行的解决方案。 Plunker只是这个问题的一个非常简单的演示。在我的实际代码中，我根据用户的输入添加和减去元素。我不想清楚之前选择的内容，我希望UI网格足够聪明，可以识别所有行不再被选中。如果你手动点击一行，它会这样做。例如，如果您单击“添加数据”按钮，则会将新行添加到网格中，但标题检查仍处于选中状态。 – wholladay

我已经更新了答案，请重新检查它 –

AngularJS用户界面不更新选择数据更改时的所有状态

回答

相关问题