AngularJS - Assign DIV a Width Based on values in ng-repeat

Question

I have a simple ng-repeat that throws out a bunch of data:

<div ng-repeat="data in myData" class="myClass">
    {{data.Name}}
    {{data.Age}}
</div>

Which will throw out something like:

Pete
25
Adam
43
Lewis
19

How can i add a CSS property to my DIV based on the value in {{data.Age}}

So, if the age is 25, my DIV should have width of 25%.

I've tried:

<div ng-repeat="data in myData" ng-style="{width: data.Age +'%'}">
    {{data.Name}}
    {{data.Age}}
</div>

Which fails

Update with Plunkr:

score 1 · Accepted Answer · answered Oct 23 '14 at 12:20

1

Use the regular style property and write in the width:

<div ng-repeat="data in myData" style="width: {{data.Age}}%;">

answered Oct 23 '14 at 12:20

tymeJV

Tried your suggestion here: http://plnkr.co/edit/HdyDByoZ2aR1Ajsf2eFQ?p=preview didnt work. – Oam Psy Oct 23 '14 at 12:32
@OamPsy -- The element is getting the style applied, it's just not having the desired effect. – tymeJV Oct 23 '14 at 13:09

Harikrishnan K.N. · Answer 2 · 2017-12-14T19:07:09.877

0

This would definitely work :

<div ng-repeat="data in myData" ng-style="{width: data.Age+'%'}">

edited Dec 14 '17 at 19:07

answered Dec 14 '17 at 18:06

Harikrishnan K.N.

2 Answers2