Как обновить ng-сетку, когда griddata имеет разное количество столбцов из предыдущих отображаемых griddata

У меня есть приложение, в котором пользователь выбирает параметр для получения данных сетки со стороны сервера и зависит от того, какой пользователь выбирает выбор, количество столбцов в данных сетки может отличаться. Я использую Angularjs и ng-grid для отображения данных. В первый раз он отлично работает и отображает правильное количество столбцов (например, 2 столбца). но когда пользователь выбирает другую опцию, которая получает 3 таблицы данных сетки, ng-grid все еще думает о старых данных столбцов и пытается сопоставить второй сетчатый файл 3-cols в старых 2 столбцах. Поскольку информация о столбцах недоступна, я не могу использовать columnDefs в контроллере. Как обновить столбцы ng-grid.
Примечание. Я попытался поместить код в jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), но каким-то образом я не могу его запустить. Мой полный код здесь.

Также: как я могу отобразить строку # в ng-сетке, не отправив ее с сервера.

My HTML file:
<!DOCTYPE html>
<html ng-app="myApp">  
    <head lang="en">
        <meta charset="utf-8">
        <title>test </title>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.io/ng-grid/lib/ng-grid.js"></script>
        <script type="text/javascript" src="gridExample.js"></script>

        <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://angular-ui.github.io/ng-grid/css/ng-grid.css'; return false;" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body ng-controller="GridExampleCtrl">
    <div>
        Grid Selection:    
        <select ng-model="gridSelectedId">
            <option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
        </select>   

        <br/>User selected:  {{gridSelectedId}} <br><hr>    
        <div>
            <button ng-click="display()">Display</button><hr>
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </div>      
    </div> 
   </body>
</html>

Мой контроллер:

var app = angular.module('myApp', ['ngGrid']);

app.controller('GridExampleCtrl', function ($scope, $http, $timeout) {    

    $scope.myData = [];

    $scope.grid1 = [{name: "grid1a", age: 50},
                    {name: "grid1b", age: 43},
                    {name: "grid1c", age: 50},
                    {name: "grid1d", age: 29},
                    {name: "grid1e", age: 34}];

    $scope.grid2 = [{lastname: "grid2a", age: 50, state:'Idaho'},
                    {lastname: "grid2b", age: 43, state:'NewYork'},
                    {lastname: "grid2c", age: 50, state:'California'},
                    {lastname: "grid2d", age: 29, state:'Arizona'},
                    {lastname: "grid2e", age: 34, state:'Utah'}];

    $scope.gridSels = [
                        {GridSelId : 1, GridSelName : 'Grid 1' },       
                        {GridSelId : 2, GridSelName : 'Grid 2' }
                        ]

     $scope.gridOptions = { 
                data: 'myData',
                enableColumnResize: true,
                showGroupPanel: true,
                //pagingOptions: $scope.pagingOptions
            };

    $scope.display = function(){
        console.log("User selected grid : " + $scope.gridSelectedId);
        if ($scope.gridSelectedId == 1) {
            $scope.myData = $scope.grid1;           
        } else {
            $scope.myData = $scope.grid2;
        }
    };      

});

и css выглядит так:

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 800px; 
    height: 400px;
}

Ответ 1

Хотя ошибка в ng-grid предотвращает этот ответ от работы с помощью enableColumnResize: true (изменения в столбцах после изменения столбца приводят к невидимые данные), при базовых обстоятельствах вы можете что-то сделать в соответствии с

$scope.colDefs = [];

$scope.$watch('myData', function() { 
 $scope.colDefs = [];

 angular.forEach(Object.keys($scope.myData[0]), function(key){
    $scope.colDefs.push({ field: key });
  });
}
);

$scope.gridOptions = {
    data: 'myData',
    columnDefs: 'colDefs',
    enableColumnResize: false,
    showGroupPanel: true
};

Здесь рабочий плункер демонстрирует его с вашим примером: http://plnkr.co/edit/w1DLtS

Ответ 2

Вы также можете вызвать метод, который предоставляется в исходном коде. Возможно, это было невозможно во время вопроса, но я сам столкнулся с проблемой. Если вы можете настроить таргетинг на сетку, вы можете использовать что-то похожее на этот фрагмент кода

scope.gridOptions.ngGrid.buildColumns();

buildColumns() является основной функцией, и вам нужно переопределить массив columnDefs как упоминаемый brentiumbrent

Ответ 3

Я также столкнулся с этой проблемой, когда попытался сделать это как услугу (не нужно настраивать ее самостоятельно все время, когда она мне нужна).

Часть моего сервиса:

setColumns: function(columnDefs){
  $rootScope.columnDefs = columnDefs;      
  return $rootScope.columnDefs;
}

Я предоставляю новые имена столбцов и поля в массиве (columnDefs) после назначения новых столбцов.