如何动态地配置纳克网 [英] How to dynamically configure ng-grid
问题描述
我有在其欲允许用户各种不同配置的网格之间选择一个angularjs应用的图。理想情况下，我想传递给NG-电网指令模型变量的值绑定，如下图所示。然而，尽管这个例子呈现标记时一个简单的字符串值传递给NG-网格（即＆LT的作品; DIV CLASS =gridStyleNG格=gridOptions1＆GT;＆LT; / DIV＆GT ; ，动态配置失败
I have a view in an angularjs application in which I want to allow the user to select between various differently configured grids. Ideally I would like to bind the value passed to the ng-grid directive to a model variable, as illustrated below. However, although this example renders markup that works when a simple string value is passed to 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>
谁能告诉我请，如果有越来越NG-电网动态地接受不同配置的一种方式，或者如果有一种变通方法，以这种限制？请注意，我需要重新配置网格的多个属性，而不仅仅是 columnDefs 和数据属性，我相信有解决方法。
Can anyone tell me please if there is a way of getting ng-grid to accept a different configuration dynamically, or if there is a workaround to this limitation? Please note that I need to reconfigure multiple properties of the grid, not just the columnDefs and data properties for which I believe there are workarounds.
Plunker： http://plnkr.co/edit/mdXrq6?p=$p$pview
推荐答案
找到了一个不错的解决这一对的角度论坛。本质上，如果配置对象的阵列被维持，单个元件可被传递到纳克格指令，因为在上述的标记。 Plunker说明这里的解决方案： http://plnkr.co/edit/TDGKRo?p=preVIEW
Found a nice solution to this on the angular forum. Essentially, if an array of config objects is maintained, individual elements can be passed to the ng-grid directive as in the markup above. Plunker illustrating solution here: http://plnkr.co/edit/TDGKRo?p=preview
var gridOptions1 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "NAME"},
{ field:"age", displayName: "AGE"}],
multiSelect: true,
selectedItems: $scope.selected
};
var gridOptions2 = {
data: 'myData',
columnDefs: [
{ field:"name", displayName: "Name"},
{ field:"age", displayName: "Age"}],
multiSelect: false,
selectedItems: $scope.selected
};
$scope.filterTabs = [{grid: gridOptions1}, {grid: gridOptions2}];
<ol>
<li ng-repeat="tab in filterTabs">
<div class="gridStyle" ng-grid="tab.grid"></div>
</li>
</ol>
这篇关于如何动态地配置纳克网的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
