AngularJS ngRepeat: как отличить четные/нечетные элементы?

Question

Я новичок в угловой и пытаюсь сделать следующее:

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

для приведенной выше коды, как ng-if проходит. Где я ошибаюсь?

Answer 1

Просьба $even и $odd Недвижимость. См. documentation.

Как:

<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

Вам не нужно использовать нг-если проверить является ли это четным или нечетным элементом, что функциональность встроена в уже:

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

Другой встроенный В функции ng-class, которая дает вам несколько вариантов условного набора класса css, здесь я использую тройную версию, но есть и другие способы ее использования.

Вот working example

Кроме того, здесь good article объясняя больше о ng-class

Answer 3

Вы также можете использовать нг-класса даже и нг-класса нечетное.

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

Answer 4

Попробуйте это в CSS:

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

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

Вы можете определить стиль для первого элемента:

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