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