AngularJS ng-repeat set size according to number of repeats

Question

I have ng-repeat that creates div for each occurrence. I want to set the size in % dynamically that it will spread through the whole parent element.

Something like:

ng-repeat="widget in widgets" 
style="display:inline-block;
       border:none;width:100/{{widgets.length}}%"

And I want to do it in my html and not in js

Is it at all possible?

is your style according to some value in widgets? I mean is the width dependent on it? — Janaki Sathiyamurthy, Jan 28 '15 at 10:29

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

<div ng-repeat="widget in widgets" >
<span ng-style="{display:'inline-block', 
       border:'none', width:100/widgets.length+'%'}" </span>
</div>

Update :

<img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg" ng-style="{width: item.value+'%'}" >

Check the first check box and see the style applied for the image : Fiddle Example

edited May 23 '17 at 12:28

Community

answered Jan 28 '15 at 10:34

Thanks! I'm having a hard time running this though, it evaluates wrong or something. I tried changing it to: ng-style="{'display':'inline-block', 'border':'none','width':100/{{widgets.length}} + '%'}" since angular expects there , instead of ; but still nothing. Any ideas? – AlexD Jan 28 '15 at 10:51

1 Answers1