AngularJS ng-repeat apply css to whole list

Question

I'm doing a image grid view galery. I'm using for that ng-repeat and CSS. My code looks like:

<div class="grid-container" style="display:block;">
<ul class="rig columns-3" ng-repeat="element in elementsList track by $index">
    <li>
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>
</div>

Now I have css for changeit to a grid with 3 columns. The problem is when I do statically 3x <li> the css works great and I have 3 images in a row. But when I'm loading it with ng-repeat I have only 1 image per row. It seems that css is applied before ng-repeat list is and somehow it doesn't make the grid for my images.

What should I do to make it right?

please share css and controller code as well

Naga Sai A
– Naga Sai A

2018-04-18 15:20:44 +00:00
Commented Apr 18, 2018 at 15:20 — Naga Sai A
– Naga Sai A, Commented Apr 18, 2018 at 15:20

kamituel · Accepted Answer · 2014-05-31 14:53:40Z

1

In this snippet, you're actually repeating <ul> three times, not <li>.

Move ng-repeat to <li>, something like:

<ul class="rig columns-3">
    <li ng-repeat="element in elementsList track by $index">
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>

(also, are you sure you need {{src_url}} and not {{element.src_url}}?)

answered May 31, 2014 at 14:53

kamituel

36.2k6 gold badges86 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS ng-repeat apply css to whole list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related