Angular JS repeater + Bootstrap Carousel

Question

I'm trying to fill a Bootstrap Carousel component with data from AngularJS. Basically I'm filling the items inside carousel-inner class like this:

 <div class="carousel-inner">
     <div class="item" ng-repeat="screen in app.screens">
       <img ng-src="screens/{{screen}}"  class="center"/>
     </div>
 </div>

Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the active class.

In the official documentation:

<div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
</div>

The first div has "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.

How can I set the first item from ng-repeat to have the "active" class?

Ricardo Lohmann · Accepted Answer · 2013-04-22 20:42:46Z

12

Use the following:

<div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}">

Here you can see which properties are exposed on the local scope.

answered Apr 22, 2013 at 20:42

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

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

1 Comment

Axarydax Over a year ago

great, thanks to your answer I understood what the docs - docs.angularjs.org/api/ng.directive:ngRepeat - mean with $first

Collectives™ on Stack Overflow

Angular JS repeater + Bootstrap Carousel

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related