AngularJS - 從數據庫動態創建數據集和模型綁定

Question

所以。 這是我第一次Angular冒險，但自-97以來，我一直在編碼從db到php到html/js的網頁。

我在我正在構建的應用程序中使用AngularJS v1.6.5，http://jtblin.github.io/angular-chart.js/和https://material.angularjs.org/latest/demo/slider。 （無法發佈所有代碼或由於客戶的鏈接）

從本質上講，我有一個休息API面向數據庫，每個數據庫都有一個區域，每個區域都有一個滑塊。每個滑塊都將綁定到自己的數據集，移動滑塊將影響多個圖表中的元素，方法是使用另一個數據集，並保存每個滑塊區域唯一的因子。

如果我對所有滑塊進行硬編碼並將它們綁定到正確的數據集，它就會像所有應用一樣工作。每個滑塊綁定到它自己的模型，移動滑塊來更改圖表中的數據，非常棒。

但是由於數據庫可以獲得更多的區域或更少的區域，所以我自然希望從控制器中的db-data創建模型和滑塊的所有數據集，並將每個滑塊綁定到正確的數據集，方法是通過ng-重複。要添加到它，將更改相同的數據集將從滑塊傳遞到更新圖表之前進行計算的服務。

我的路由指定「ChartController as chart」，並在控制器中執行「var chartdata = this;」所以我沒有使用模型的實際$範圍。

在控制器中，我有一個數據集包含API的區域，它將獲得一個滑塊，它包含一個名稱和一個id，然後我將爲每個滑塊生成數據集，以保存來自另一個API調用的滑塊值。

所以我會在控制器產生從數據庫中數據的多個數據集，當時的想法是他們的名字一樣，這些地方的滑塊區域的ID在模型名的末尾號：

//default slider settings from database 
chartdata.slider_id_1 = 4; 
chartdata.slider_id_2 = 3; 
chartdata.slider_id_3 = 2; 
chartdata.slider_id_4 = 6; 
chartdata.slider_id_5 = 4; 
chartdata.slider_id_6 = 7; 
chartdata.slider_id_7 = 3; 
chartdata.slider_id_8 = 9; 
chartdata.slider_id_9 = 5; 
chartdata.slider_id_10 = 8; 
chartdata.slider_id_11 = 12; 
chartdata.slider_id_12 = 1; 
chartdata.slider_id_13 = 2; 

// weighting for impact 
chartdata.factor_id_1 = 0.24; 
chartdata.factor_id_2 = 0.46; 
chartdata.factor_id_3 = 0.97; 
chartdata.factor_id_4 = 0.62; 
chartdata.factor_id_5 = 0.125; 
chartdata.factor_id_6 = 0.166; 
chartdata.factor_id_7 = 0.33; 
chartdata.factor_id_8 = 0.698; 
chartdata.factor_id_9 = 0.489; 
chartdata.factor_id_10 = 0.44; 
chartdata.factor_id_11 = 0.12; 
chartdata.factor_id_12 = 0.1; 
chartdata.factor_id_13 = 0.22; 

然後，我在我的模板中迭代滑塊區域數據集，這是我想動態創建模型名稱的位置。即。將chart.slider_id_XX和chart.factor_id_XX映射到生成的數據集。

<div ng-repeat="slider in chart.sliders"> 
<div flex="20" layout layout-align="center center" > 
<span class="md-body-1">{{slider.Name}}</span> 
</div> 
<md-slider flex md-discrete ng-model="chart.slider_id_11" step="1" min="0" max="100" aria-label="{{slider.Name}}" id="{{slider.Id}}" ng-click="updateImpact(chart.slider_id_11,chart.factor_id_11);"> 
</md-slider> 
</div> 

這樣我就可以在某些地方使用sliderdata的名稱和ID，但不是在模型綁定在哪裏，在服務器端會連接到一起與滑塊對象的ID字符串，但在這裏不起作用，可能是由於JavaScript和ng指令被處理的順序。

我已經看過類似的問題一整天，但他們傾向於只解決它的一面，或看似，使用模型集合並通過數組索引引用，但我不能爲我的生活讓它工作。

我可以訴諸硬編碼，只是爲了解決問題，但它會覺得很愚蠢。

我可以完全控制所有的代碼，從SQL查詢到數據結構到js代碼的所有內容，而且我沒有鎖定上述示例，所以我在實現智能方面非常靈活，如果有一個被發現的話，那麼就是一個很好的練習方案。

感謝這裏的所有幫助！ /Dan

Answer 1

您可以像這樣創建動態模型綁定。

創建一個通用對象來保存所有滑塊的值。

$scope.SliderDTO = {}; 

現在綁定NG-模型在滑塊是這樣的：

<md-slider flex md-discrete ng-model="SliderDTO[slider.Name]" step="1" 
min="0" max="100" aria-label="{{slider.Name}}" id="{{slider.Id}}" ng- 
    click="updateImpact(chart.slider_id_11,chart.factor_id_11);"> 
</md-slider> 

最後選定的值將作爲可用這樣的：

對於滑名slider_id_1值將在$範圍。 SliderDTO.slider_id_1