2017-02-22 19 views
0

У меня есть ui-сетка с включенным multi-select. Все работает нормально, за исключением случаев, когда данные меняются, столбец «select» в заголовке неправильно отображает состояние сетки. Я создал simple example in plunker, который иллюстрирует проблему. Чтобы воспроизвести, просто нажмите кнопку выбора заголовка.AngularJS ui-grid не обновляет выбор всего состояния при изменении данных

All rows selected

Затем нажмите кнопку "Добавить данные".

Header does not match grid state

Обратите внимание, что заголовок еще показывает галочку, но вновь добавленные строки не проверяется.

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

}]); 

ответ

0

Я решен вопрос, пожалуйста, обратитесь это: http://plnkr.co/edit/lJsWof?p=preview

, где это точка внимания

$scope.gridApi.selection.clearSelectedRows(); 

шаги для проверяемых или непроверенных всех строк

  1. получить объект сетки

    $scope.gridOpts.onRegisterApi = function(gridApi) 
    { 
        $scope.gridApi = gridApi; 
    }; 
    
  2. методы вызова theire очистить ряды

    $scope.gridApi.selection.clearSelectedRows() 
    

смотрите этот http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi

+0

Спасибо за ответ, но это не является жизнеспособным решением. Plunker - это просто очень простая демонстрация проблемы. В моем фактическом коде у меня есть элементы, которые добавляются и вычитаются на основе ввода от пользователя. Я не хочу очищать ранее выбранное, я хочу, чтобы ui-grid была достаточно умна, чтобы распознать, что все строки больше не выбраны. Это будет сделано, если вы вручную щелкните по строке. Например, если вы нажмете кнопку «Добавить данные», новая строка будет добавлена ​​в сетку, но проверка заголовка по-прежнему будет выбрана. – wholladay

+0

Я обновил ответ, пожалуйста, проверьте его –