0

現在私は持っています：

<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 が適切に入力されるという規則に従っている限り、テンプレートを扱うことなくチャートを追加または削除できます。どうすればこれを達成できますか?

4

1 に答える 1

1

angular では{{ }}、スコープ値を html 内の場所にバインドするために使用されます。コントローラーのスコープを更新すると、自動的に更新されます。

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

スコープチャートによると、このようなものです

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

jsフィドル

于 2013-08-22T03:16:17.747 に答える