CODEWITHSUNDEEP
angularjs
tipu
tipu

Reputation: 9594

dynamically binding data in angularjs

currently i have:

<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>

here i am statically binding values to the different elements. what i want to do instead is:

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

this will allow me to add or remove charts without having to deal with the template as long as i follow the convention that $scope.chartX will appropriately be populating. how can i achieve this?

Upvotes: 0

Views: 90

Answers (1)

L105
L105

Reputation: 5419

In angular {{ }} are used to bind scope value to a location in html. It will update automatically if you update the scope in your controller.

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

According that you scope charts is like this

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

jsFiddle

Upvotes: 1

Related Questions