AngularJS ng-grid - Dynamically updating the columns and results

angularjs, angularjs-scope, javascript, ng-grid

Solution

You must set up your column definition variations on the scope. You can also define the configuration property `columnDefs` with a string that represents a scope property. Like the configuration of `data`, this allows you to watch the scope field and switch it out.

Here is an updated Plunker.

Changes to the js:

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.columns1 = [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];
    $scope.columns2 = [{field: 'new_name', displayName: 'New Name'}, {field:'new_age', displayName:'New Age'},{field:'pin', displayName:'Pin'}];
    $scope.columnsSelected = $scope.columns1;
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: 'columnsSelected'
    };

    $scope.update_columns = function($event) { 

      $scope.columnsSelected = $scope.columns2;

      $scope.myData = [{new_name: "Moroni", new_age: 50, pin: 123},
       {new_name: "Tiancum", new_age: 43, pin: 345},
       {new_name: "Jacob", new_age: 27, pin: 567},
       {new_name: "Nephi", new_age: 29, pin: 789},
       {new_name: "Enos", new_age: 34, pin: 012}
      ];
    }
});

Problem

Original source