是否可以動態創建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？

回答

相關問題