AngularJS ngRepeat: come differenziare gli elementi pari/dispari?

Question

Sono nuovo di angolari e cercando di effettuare le seguenti operazioni:

<tr data-ng-repeat="element in awesomeThings"> 
<div ng-if="$index %2 == 0"> 
    <td class="even"> 
     <a href="#"> 
      {{element}} 
     </a> 
    </td> 
</div> 
<div ng-if="$index %2 != 0"> 
    <td class="odd"> 
     <a href="#"> 
      {{element}} 
     </a> 
    </td> 
</div> 
</tr> 

per il codice di cui sopra, sia ng-if sta passando. Dove sto sbagliando?

Answer 1

Provare $even e $odd proprietà. Fare riferimento a documentation.

come:

<tr data-ng-repeat="element in awesomeThings"> 
<div ng-if="$even"> 
    <td class="even"> 
     <a href="#"> 
      {{element}} 
     </a> 
    </td> 
</div> 
<div ng-if="$odd"> 
    <td class="odd"> 
     <a href="#"> 
      {{element}} 
     </a> 
    </td> 
</div> 
</tr> 

Answer 2

Non è necessario utilizzare ng-se per verificare se si tratta di un elemento di pari o dispari, tale funzionalità è incorporata già:

<tr ng-repeat="element in awesomeThings"> 
     <span ng-class="$even ? 'odd' : 'even'">{{element}}</span> 
    </tr> 

Un altro costruito -in funzione è ng-class che offre diverse opzioni per impostare in modo condizionale una classe css, qui sto usando la versione ternaria ma ci sono altri modi per usarlo anche.

Ecco un working example

Inoltre, ecco un good article spiegare di più su ng-class

Answer 3

È anche possibile utilizzare ng classe, anche e ng-class-dispari.

https://docs.angularjs.org/api/ng/directive/ngClassEven https://docs.angularjs.org/api/ng/directive/ngClassOdd

Answer 4

Prova questa in css:

tr:nth-child(even) { 
    background: #CCC 
} 

tr:nth-child(odd) { 
    background: #FFF 
} 

Si potrebbe definire lo stile per il primo oggetto:

tr:first-child { 
    background: #84ace6 
}