AngularJS ngRepeat: Wie unterscheidet man gerade/ungerade Elemente?

Question

Ich bin neu in Winkel- und versuchen, Folgendes zu tun:

<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> 

für den obigen Code, beide ng-if vorbei ist. Wo mache ich Fehler?

Answer 1

Versuchen Sie $even und $odd Eigenschaften. Siehe die documentation.

Like:

<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

Sie brauchen nicht ng-wenn verwenden um zu überprüfen, ob es eine gerade oder ungerade Element ist, wird diese Funktionalität Built-in bereits:

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

Ein weiteres gebaut -in Feature ist ng-class das gibt Ihnen mehrere Optionen, um eine CSS-Klasse bedingt einzustellen, hier verwende ich die ternäre Version, aber es gibt andere Möglichkeiten, es auch zu verwenden.

Hier ist ein working example

Auch hier ist ein good article erklärt mehr über ng-class

Answer 3

Sie auch ng-Klasse-even und ng-Klasse-ungerade verwenden können.

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

Answer 4

dies in CSS-Versuche:

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