动态绑定angularjs中的数据

时间:2013-08-22 00:18:48

标签: angularjs

目前我有:

<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将适当填充的约定。我怎么能做到这一点?

1 个答案:

答案 0 :(得分:1)

在角度{{ }}中用于将范围值绑定到html中的位置。如果更新控制器中的范围,它将自动更新。

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

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

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

jsFiddle