angularjs - 在angularjs中动态绑定数据

Question

目前我有：

<chart1 id='chart1' style="width:50%;float:left;" value='{: chart1 :}' type="area" height="400">
</chart1>

<chart2 id='chart2' style="width:50%;float:left;" value='{: chart2 :}' type="area" height="400">
</chart2>

<chart3 id='chart3' style="width:50%;float:left;" value='{: chart3 :}' type="area" height="400">
</chart3>

<chart4 id='chart4' style="width:50%;float:left;" value='{: chart4 :}' type="area" height="400">
</chart4>

<chart5 id='chart5' style="width:50%;float:left;" value='{: chart5 :}' type="area" height="400">
</chart5>

<chart6 id='chart6' style="width:50%;float:left;" value='{: chart6 :}' type="area" height="400">
</chart6>

在这里，我将值静态绑定到不同的元素。我想做的是：

<div id="{:chart.identifier:}" ng-repeat="chart in charts" value="{: {:chart.identifier:} :}"></div>

这将允许我添加或删除图表而无需处理模板，只要我遵循 $scope.chartX 将适当填充的约定。我怎样才能做到这一点？

Answer 1

在 Angular{{ }}中用于将范围值绑定到 html 中的某个位置。如果您更新控制器中的范围，它将自动更新。

<div id="{{chart.identifier}}" ng-repeat="chart in charts" value="{{chart.identifier}}"></div>

根据你的范围图表是这样的

$scope.charts = [
         {identifier : 'chart1'},
         {identifier : 'chart2'},
          ...
];

jsFiddle