<div class="carousel-inner" role="listbox" ng-repeat='item in myData'> <div class="item active"> <img ng-src="{{item.photoUrl}}" alt="pic"> <div class="carousel-caption"> <ul> <h3>{{item.description}}</h3> <li>{{item.instruction}}</li> </ul> </div> </div>

There is a bootstrap carousel, the first element has the class " active ", and the next ones inherit it when they are clicked, this way the carousel works. With ng-repeat I can pass either all active or not pass the class at all.

Is there any way to select 1 element ng-repeat using filter or in another way and set the class active , only to it.

  • Do you want the class to be exposed only once at boot time? - Grundy
  • @Grundy only on 1st inserted element. So I load 10 elements onto the page, with the help of ng-repeat, it is necessary for the 1st to have the class 'active', and for the other 9-is not to have. - Venya
  • Add an activ field to the item and check it. - Grundy
  • @Grundy sorry, didn’t quite understand how to implement it, with an angular sign just a couple of days. In the controller check register? or can you make a filter on first-child and assign it a class like that? - Venya
  • no, at the time when myData received in the controller, do myData[0].active = true ; and in the markup `<div class =" item "ng-class =" {active ': item.active} ">` - Grundy

3 answers 3

NgRepeat has a $first property. You can use it. Thus, in the element that will be repeated, you need to add the following line: ng-class="{ 'acive': $first }"

You also need to transfer ngRepeat to <div class="item"> ...

Complete code:

  <div class="carousel-inner" role="listbox" > <div class="item" ng-repeat='item in myData' ng-class="{ 'acive': $first }"> <img ng-src="{{item.photoUrl}}" alt="pic"> <div class="carousel-caption"> <ul> <h3>{{item.description}}</h3> <li>{{item.instruction}}</li> </ul> </div> </div> </div>

    One option is to store the active field in the item object itself. And depending on the value, add or remove the class active .

     <div class="item" ng-class="{'active': item.active}">

    You can set it for the first element to true at the time of receiving data

     myData[0].active = true;

      Another option is to repeat the iteration itself and, if i===0 , then set the class:
      ng-repeat="(i, item} in myData"
      ng-class="{'active':i === 0}"