是否可以动态创建ng-grid？

作为我的一个Web项目的一部分我需要同一个应用程序中的多个ng-grid实例，作为用户能够根据需要动态创建多个网格（想想通常的“添加新网格..”）按钮。我已经通过该文档了并实现了一个原型，但是我发现，对于网格中的设置包括包含数据的变量的硬编码的名称，例如：是否可以动态创建ng-grid？

在角的.js控制器，

$scope.gridOptions = { data: 'myData' };

，并在html：

<div class="gridStyle" ng-grid="gridOptions">

我使用变量，而不是尝试，例如：

var mychart = [{...}, {...}]; // data rows 
$scope.gridOptions = { data: $scope.mychart };

和

<div class="gridStyle" ng-grid="{{gridOptions}}">

但没有成功。我在网上找到的所有例子都只使用一个表格，所以我的问题仍然没有答案。任何想法如何解决这个问题或者是这个网格系统的主要限制？谢谢！

来源

2014-03-31 rubenafo

'{{gridOptions}}'没有做什么，你认为它。您可以为每个网格创建一个新的作用域。 – Mosho

那它是做什么的呢？您能否更好地解释一下创建新范围的问题？ – rubenafo

像往常一样，当你发现自己需要的对象任意数量的，你应该考虑把他们集合中，而不是给他们个人的名字。我已经更新韦恩的jsfiddle使用数组和NG-重复：http://jsfiddle.net/Th47J/

让每个选项的网格：

<div ng-repeat="option in gridOptions" class="gridStyle" ng-grid="option"></div>

显然，如果这些被动态创建，你需要更新gridOptions数组以编程方式而不是一切硬编码。但是，如果数据源是唯一正在改变的事情，那很容易。

来源

2014-04-03 22:37:07 bmm6o

谢谢，这个例子解决了所有这些问题。 – rubenafo

太好了。我不确定它会工作，但Angular经常做你想做的事。 – bmm6o

你需要类似this？

I know "Links to jsfiddle.net must be accompanied by code."

来源

2014-03-31 07:09:59 wayne

感谢这个例子，它部分解决了这个问题，因为data：'tasks'和data：'tasks2'仍然是硬编码ID – rubenafo

那么我终于设法做到了这一点。关键是数据引用（在这种情况下是myData []）可以动态生成（例如，myData +'['+ myData.length +']'），每次添加一个新选项卡时。当然，您需要在选项卡和myData长度之间保持同步。

的HTML：

<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane" ng-repeat="tab in tabs" id="{{tab.id}}"> 
     <div class="gridStyle" ng-grid="{{tab.ref}}"></div> 
    </div> 
</div>

的角度部分：

$scope.tabs = [ 
     {id: 0, title: 'a', contentId: '#0', data: 'lorem 1', ref:{data: 'myData[0]'}}, 
     {id: 1, title: 'b', contentId: '#1', data: 'lorem 2', ref:{data: 'myData[1]'}}, 
     {id: 2, title: 'c', contentId: '#2', data: 'lorem 3', ref:{data: 'myData[2]'}} 
    ]; 

$scope.myData = [[ 
     {name: "ryan1", surn: "smith1", address:"main square 1", phone:"000000001"}, 
     {name: "ryan1", surn: "smith1", address:"main square 1", phone:"000000001"}, 
     ], 
     [{name: "ryan2", surn: "smith2", address:"main square 2", phone:"000000002"}, 
     {name: "ryan2", surn: "smith2", address:"main square 2", phone:"000000002"}, 
     ], 
     [{name: "ryan3", surn: "smith3", address:"main square 3", phone:"000000003"}, 
     {name: "ryan3", surn: "smith3", address:"main square 3", phone:"000000003"}, 
     ], 
];

来源

2014-04-08 00:14:51 rubenafo

是否可以动态创建ng-grid？

回答

相关问题