AngularJS - 从数据库动态创建数据集和模型绑定

Question

所以。 这是我的第一次 Angular 冒险，但自 -97 年以来，我一直在编写从 db 到 php 到 html/js 的 web。

我正在构建的应用程序中使用 AngularJS v1.6.5、http://jtblin.github.io/angular-chart.js/ 和 https://material.angularjs.org/latest/demo/slider。 （由于客户原因，无法发布所有代码或链接）

本质上，我有一个面向数据库的 rest API，其中包含许多区域，每个区域都有一个滑块。每个滑块都将绑定到它自己的数据集，移动滑块将通过使用另一个数据集来影响许多图表中的元素，该数据集包含每个滑块区域独有的因素。

如果我对所有滑块进行硬编码并将它们绑定到正确的数据集，则一切正常。每个滑块都绑定到它自己的模型，移动滑块会改变图表中的数据，很棒。

但是既然数据库可以得到更多的区域，或者更少，我自然想从控制器中的 db-data 中创建模型和滑块的所有数据集，并通过 ng-repeat 将每个滑块绑定到正确的数据集.要添加到它，相同的数据集将在更改时从滑块传递到在更新图表之前进行计算的服务。

我的路由分配“ChartController as chart”，在控制器中我执行“var chartdata = this;”所以我没有使用模型的实际 $scope。

在控制器中，我有一个数据集包含来自 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;

然后我的模板中有这个迭代滑块区域数据集，这是我想动态创建模型名称的地方。 IE。 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>

所以我可以在某些地方使用滑块数据的名称和 ID，但不能在模型绑定中使用，在该模型绑定中，我在服务器端将一个字符串与滑块对象的 ID 连接在一起，但这在这里不起作用，可能是由于处理 javascript 和 ng-directives 的顺序。

我已经看了一整天类似的问题，但他们往往只解决它的一个方面，或者看似使用模型集合并通过数组索引进行引用，但我终生无法得到它可以工作。

我可以诉诸硬编码，只是为了解决这个问题，但感觉很愚蠢。

我可以完全控制所有代码，从 SQL 查询到数据结构再到 js 代码，而且我没有被锁定在上面列出的示例中，所以我在实现智能、好的做法解决方案，如果有的话。

感谢这里的所有帮助！ /丹

Answer 1

您可以像这样创建动态模型绑定。

创建一个通用对象来保存所有滑块的值。

   $scope.SliderDTO = {};

现在像这样在你的滑块中绑定 ng-model：

 <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 的值将在 $scope.SliderDTO.slider_id_1 中