Search code examples
angularjsangularjs-scopeangularjs-ng-repeatng-classng-style

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


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:

http://plnkr.co/edit/HdyDByoZ2aR1Ajsf2eFQ?p=preview


Solution

  • Use the regular style property and write in the width:

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