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.
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
Post a Comment