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-repeat将每个滑块绑定到正确的数据集。要添加它，更改的相同数据集将从滑块传递到服务，该服务在更新图表之前进行计算。

我的路由将“ChartController指定为图表”，在控制器中我执行“var chartdata = this;”所以我没有使用模型的实际$ scope。

在控制器中，我有一个数据集，其中包含来自API的区域，它将获得一个滑块，它包含一个名称和一个id，然后我将为每个滑块生成数据集，其中包含来自另一个API调用的滑块的值。 / p>

所以我将在控制器中从数据库中的数据生成多个数据集，想法是将它们命名为滑块区域的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-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

中

AngularJS - 从数据库

1 个答案: