javascript - Angular JS repeater + Bootstrap Carousel - Stack Overflow

admin管理员组

文章数量:1279055

I'm trying to fill a Bootstrap Carousel ponent 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?

I'm trying to fill a Bootstrap Carousel ponent 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?

• javascript
• html
• twitter-bootstrap
• angularjs

Share Improve this question Follow asked Apr 22, 2013 at 20:38 AxarydaxAxarydax 16.6k2222 gold badges9595 silver badges154154 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptAngular JS repeaterBootstrap CarouselStack Overflow