Question

作为我的一个Web项目的一部分，我需要在同一个应用程序中使用多个ng-grid实例，用户可以根据需要动态创建尽可能多的网格（想想通常＆＃34;添加新网格..＆＃34;）按钮。我已经浏览了文档并实现了原型，但我发现网格的设置包含了包含数据的变量的硬编码名称，例如：

角度.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}}">

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

Answer 1

像往常一样，当你发现自己需要任意数量的对象时，你应该考虑将它们放在一个集合中，而不是给它们个人命名。我已经更新了Wayne的jsfiddle来使用数组和ng-repeat：http://jsfiddle.net/Th47J/

为每个选项创建一个网格：

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

显然，如果这些是动态创建的，那么您需要以编程方式更新gridOptions数组，而不是将所有内容都硬编码。但是，如果数据源是唯一正在改变的东西，那就很容易了。

Answer 2

好吧，我终于成功了。关键是数据引用（本例中为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"},
        ],
];

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

2 个答案: