: first child with ng-repeat

Question

I have ng-repeat and only want to apply style to the first div with class type in ng-repeat.

 <div class="my-list" ng-repeat="item in list"> <div class="type"> <span>{{item.label}}</span> </div> <div class="check"> <span>{{item.ischecked}}</span> </div> </div> 

I tried the following but applied CSS to all divs with class type

 .my-list .type:first-child 

Answer 1

You can use $first , which indicates the first iteration in ng-repeat .

 <div class="my-list" ng-repeat="item in list"> <div class="type" ng-class="{myClass:$first}"> <span>{{item.label}}</span> </div> <div class="check"> <span>{{item.ischecked}}</span> </div> </div> 

Answer 2

Basically you need to do the opposite.

 .my-list:first-child .type{ color:red; } 

ng-repeat will put multiple .my-list , and you want to target .type only of the first div. So apply a selector to .my-list .