AngularJS ngRepeat: làm thế nào để phân biệt các phần tử chẵn/lẻ?

Question

Tôi mới đến góc cạnh và cố gắng để làm như sau:

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

cho mã trên, cả hai ng-if đã qua. Tôi đang phạm sai lầm ở đâu?

Answer 1

Hãy thử $even và $odd thuộc tính. Tham khảo documentation.

Giống như:

<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

Bạn không cần phải sử dụng ng-nếu để kiểm tra xem nó là một yếu tố chẵn hoặc lẻ, chức năng được tích hợp đã:

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

xây dựng khác -in tính năng là ng-class cung cấp cho bạn một số tùy chọn để thiết lập điều kiện một lớp css, ở đây tôi đang sử dụng phiên bản thứ ba nhưng có nhiều cách khác để sử dụng nó.

Đây là một working example

Ngoài ra, đây là một good article giải thích thêm về ng-class

Answer 3

Bạn cũng có thể sử dụng ng-đẳng cấp thậm chí và ng-đẳng cấp lẻ.

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

Answer 4

Hãy thử điều này trong css:

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

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

Bạn có thể xác định phong cách cho mục đầu tiên:

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