Comment rafraîchir ng-grid lorsque griddata a un nombre différent de colonnes par rapport aux griddata affichés précédemment

J'ai une application dans laquelle l'utilisateur sélectionne une option pour obtenir la grille de données de serveur de côté et dépendent de ce que l'utilisateur sélectionne l'option, le nombre de colonnes dans la grille de données peut varier. Je suis en utilisant Angularjs et ng-grille pour afficher les données. La première fois, il fonctionne très bien et il ne s'afficher correctement le nombre de colonnes (e.g 2 colonnes). mais lorsque l'utilisateur sélectionne une autre option, qui obtient 3 colonnes de la grille de données, ng-grille pense encore à la vieille colonnes de l'information et de la tente de la carte la deuxième de 3 cols de la grille de données dans le vieux 2 colonnes. Puisque les colonnes info n'est pas disponible, je ne peux pas utiliser columnDefs dans le contrôleur. Comment puis-je actualiser ng-colonnes de la grille.
Note: j'ai essayé de mettre le code à jsFiddle (http://jsfiddle.net/User888/pwUeX/11/), mais de toute façon, je ne suis pas capable de l'exécuter. Mon code complet est ici.

Aussi: Comment puis-je afficher la ligne# ng-grille sans l'envoyer à partir du serveur.

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="http://angular-ui.github.io/ng-grid/css/ng-grid.css" />
        <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>

Mon Contrôleur est:

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

});

et css ressemble:

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

source d'informationauteur Ajay Kumar

  1. 8

    Si un bug en ng-grille empêche cette réponse de travailler avec les enableColumnResize: vrai (changements de columnDefs après une colonne de changement fera en sorte invisible de données), en vertu de la base des circonstances, vous pouvez faire quelque chose le long des lignes de 

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

    Voici un travail plunker démontrer avec votre exemple:
    http://plnkr.co/edit/w1DLtS

  2. 10

    Vous pouvez également appeler une méthode qui est fourni dans le code source. Cela peut ne pas avoir été disponible au moment de la question, mais j'ai couru dans la question moi-même. Si vous êtes en mesure de cibler la grille elle-même, vous pouvez utiliser quelque chose de similaire à ce morceau de code

    scope.gridOptions.ngGrid.buildColumns();

    buildColumns() est la fonction principale et vous devez redéfinir la columnDefs tableau comme brentiumbrent mentionné

  3. 0

    J'ai aussi rencontré ce problème lorsque j'ai essayé de faire ce que service(n'avez pas à configurer par moi-même tout le temps que j'en ai besoin).

    Un morceau de mon service:

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

    Je donne de nouveaux noms de colonnes et les champs dans le tableau (columnDefs) après je attribuer de nouvelles colonnes.