2

AngularJS

How can i get first element and add class 'active' automatically .

There is 2 ng-repeat , I want get first group --> first item --> first element and add class.

<div class="first"  ng-repeat="group in group ">    
  <div class="second"  ng-repeat="item in items">    
     <div ng-class="{'active': selectedGame.id === prematchGame.id}"></div>  
  </div> 
</div>
Community
  • 1
  • 1

4 Answers4

3

You can do like this:

<div ng-class='{active:$first}' > {{item.data}}</div>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Sai M.
  • 2,548
  • 4
  • 29
  • 46
0

Use $first to do check for the first element of ng-repeat : Fiddle

<div class="first"  ng-repeat="group in group" ng-init="firstGroup = $first">    
  <div class="second"  ng-repeat="item in items">    
     <div ng-class="{'active': selectedGame.id === prematchGame.id}"  ng-class='{active: $first && firstGroup}'></div>  
  </div> 
</div>
Supradeep
  • 3,246
  • 1
  • 14
  • 28
  • its not working , i want to get first group --> first item --> first element only –  Jan 05 '17 at 12:06
  • In this way every element of first items has class 'acitve' for example: 1 group --> 3 items --> 5 elements , in this way 3 elements has active class ,but i want only one and first –  Jan 05 '17 at 12:14
  • Yeah, got it. Please try my updated answer now and let me know if that is what you are expecting – Supradeep Jan 05 '17 at 12:22
  • @AroTonoyan Check the fiddle I've added above. – Supradeep Jan 05 '17 at 12:28
0

simple way if all you want is first element

<div class="first"  ng-repeat="group in group">    
  <div class="second"  ng-repeat="item in items">    
     <div ng-class="{'active': $index == 1}" ></div>  
  </div>
 </div>

you can do same for other ng-repeat all will have different $index

Vikas Vanvi
  • 462
  • 2
  • 18
0

If you want to make active only the first element of the first ng-repeat, then try:

<div class="first" ng-repeat="group in groups">    
  <div class="second" ng-repeat="item in items">    
    <div ng-class='{active: $first && $parent.$first}'>{{item.data}}</div>
  </div>
</div>

Demo on JSFiddle

Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • Sorry , one question also about this element ... whats the best way to trigger a click in this element ?? –  Jan 05 '17 at 13:04
  • You want to know when the first element of the first ng-repeat is clicked? – Mistalis Jan 05 '17 at 13:06
  • No i want to find first element , and click automatically this element –  Jan 05 '17 at 13:08
  • I don't understand the concept of "click automatically this element", why don't you simply call a function on this element? – Mistalis Jan 05 '17 at 13:09
  • I guess it should be [a new question](http://stackoverflow.com/questions/ask)... :) – Mistalis Jan 05 '17 at 13:10
  • done . http://stackoverflow.com/questions/41486469/trigger-a-click-on-a-element-onload –  Jan 05 '17 at 13:34