AngularJS - назначить DIV ширину на основе значений в ng-repeat

У меня есть простой ng-repeat, который выдает кучу данных:

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

Который выкинет что-то вроде:

Pete
25
Adam
43
Lewis
19

Как я могу добавить свойство CSS в свой DIV на основе значения в {{data.Age}}

Итак, если возраст равен 25 годам, мой DIV должен иметь ширину 25%.

Я пытался:

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

Что терпит неудачу

Обновление с помощью Plunkr:

angularjs angularjs-ng-repeat ng-class ng-style angularjs-scope

Oam Psy 23.10.2014 источник

arrow_upward
1
arrow_downward

Используйте свойство обычного стиля и напишите ширину:

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

tymeJV 23.10.2014

comment

Попробовал ваше предложение здесь: plnkr.co/edit/HdyDByoZ2aR1Ajsf2eFQ?p=preview не работает . - Oam Psy; 23.10.2014

comment

@OamPsy - к элементу применяется стиль, он просто не дает желаемого эффекта. - tymeJV; 23.10.2014

arrow_upward
0
arrow_downward

Это определенно сработает:

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

Harikrishnan K.N. 14.12.2017