dynamically binding data in angularjs

Question

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?

What do {: and :} do?

zs2020
– zs2020

2013-08-22 01:53:17 +00:00
Commented Aug 22, 2013 at 1:53 — zs2020
– zs2020, Commented Aug 22, 2013 at 1:53

L105 · Accepted Answer · 2013-08-22 03:16:17Z

1

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

answered Aug 22, 2013 at 3:16

L105

5,4193 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamically binding data in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related