angularjs - How to dynamically configure ng-grid -


i have view in angularjs application in want allow user select between various differently configured grids. ideally bind value passed ng-grid directive model variable, illustrated below. however, although example renders markup works when simple string value passed ng-grid (ie. <div class="gridstyle" ng-grid="gridoptions1"></div>, dynamic configuration fails.

var app = angular.module('myapp', ['nggrid']); app.controller('myctrl', function($scope) {     $scope.option;     $scope.mydata = [{name: "moroni", age: 50},                  {name: "tiancum", age: 43},                  {name: "jacob", age: 27},                  {name: "nephi", age: 29},                  {name: "enos", age: 34}];      $scope.gridoptions1 = { data: 'mydata',                        columndefs: [{ field:"name", displayname: "name"},                                    { field:"age", displayname: "age"}],                        multiselect: true };      $scope.gridoptions2 = { data: 'mydata',                        columndefs: [{ field:"name", displayname: "name"},                                    { field:"age", displayname: "age"}],                        multiselect: false };  });  <body ng-controller="myctrl">     <label>show me:</label>     <input type="radio" name="option" ng-model="option" value="gridoptions1">grid a</input>     <input type="radio" name="option" ng-model="option" value="gridoptions2">grid b</input>     <div class="gridstyle" ng-grid="{{option}}"></div> </body> 

can tell me please if there way of getting ng-grid accept different configuration dynamically, or if there workaround limitation? please note need reconfigure multiple properties of grid, not columndefs , data properties believe there workarounds.

plunker: http://plnkr.co/edit/mdxrq6?p=preview

it looks can if assign columndefs string of property on $scope , change array: http://plnkr.co/edit/wuob1m?p=preview;

it described in this issue raised on ng-grid.

js:

var app = angular.module('myapp', ['nggrid']); app.controller('myctrl', function($scope) {      $scope.mydata = [{name: "moroni", age: 50},                      {name: "tiancum", age: 43},                      {name: "jacob", age: 27},                      {name: "nephi", age: 29},                      {name: "enos", age: 34}];      $scope.columndefs1 = [{ field:"name", displayname: "name"},                                    { field:"age", displayname: "age"}];       $scope.columndefs2 = [{ field:"name", displayname: "name"},                                    { field:"age", displayname: "age"}];                                      $scope.gridoptions = { data: 'mydata',                        columndefs: 'columndefs1',                        multiselect: true };      $scope.switchcolumndefs = function() {          $scope.columndefs1 = $scope.columndefs2;        }  }); 

html:

<body ng-controller="myctrl">         <label>show me:</label>         <a ng-click="switchcolumndefs()">switch options</a>         <div class="gridstyle" ng-grid="gridoptions"></div>     </body> 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -