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

एक और बनाया:

<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

आप एनजी-अगर प्रयोग करने में क्या यह एक सम या विषम तत्व है की जांच करने के कि कार्यक्षमता में निर्मित किया गया है पहले से ही की जरूरत नहीं है -इन सुविधा ng-class है जो आपको सशर्त रूप से एक सीएसएस वर्ग सेट करने के लिए कई विकल्प देती है, यहां मैं टर्नरी संस्करण का उपयोग कर रहा हूं लेकिन इसका उपयोग करने के अन्य तरीके भी हैं।

यहाँ यहाँ एक 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

सीएसएस में इस प्रयास करें:

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

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

आप पहली बार आइटम की शैली निर्धारित कर सकते हैं:

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