Bootstrap col size depending on ng-repeat items

Question

I'm trying to populate my site with ng-repeat images. I wanted to make something like if there is only one image in images, it's going to get 1 full row(col-xs-12), if there will be 2 images, they are going to load as col-xs-6, up to maximum 6 images(col-xs-2 per image).

Is it even possible to play it like that? I wanted to list them as ul>li>img + description.

Cheers!

score 4 · Answer 1 · answered Mar 02 '16 at 12:25

4

Yes it's actually possible using the ng-class directive of Angular.

What you can do is call a function with the number of images you get that will return the corresponding Bootstrap class.

answered Mar 02 '16 at 12:25

Erazihel

7,295
6
30
53

okay, seems like yours and hadiJZ example would do great. Thank you very much! – Shivan Mar 02 '16 at 12:32

Hadi J · Accepted Answer · 2016-03-08T07:38:09.917

2

you can write like this

  <ul>
       <li ng-repeat="image in images" ng-class="{'col-xs-12':images.length== 1 ,  }">
       </li>

  </ul>

edited Mar 08 '16 at 07:38

answered Mar 02 '16 at 12:31

Hadi J

16,989
4
36
62

score 0 · Answer 3 · answered Mar 02 '16 at 13:31

You can also do it like this :

<ul>
     <li ng-repeat="image in images" class="col-xs-{{Math.floor(12 / images.length)}}">
     </li>
</ul>

this way, the width of the column will be automatically set. The problem is if you have more than 12 images, the width will be 0.

Bootstrap col size depending on ng-repeat items

3 Answers3