AngularJS ngRepeat：如何区分偶数/奇数元素？

我是新来的角度，努力做到以下几点：AngularJS ngRepeat：如何区分偶数/奇数元素？

<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在流逝。我在哪里犯错？

来源

2014-10-09 batman

指数是角 – Pascalz 2014-10-09 06:22:20

没有运气$指数。其结果相同 – batman 2014-10-09 06:24:37

https://docs.angularjs.org/api/ng/directive/ngClassOdd – 2014-10-09 06:29:26

尝试$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>

来源

2014-10-09 06:30:15

没有运气。它是一样的:( – batman 2014-10-09 06:53:26

请确保你使用的是Angular.js 1.2.0或更新版本。 – gligoran 2016-01-14 10:34:41

你并不需要使用NG-如果以检查它是否是奇数或偶数元素，该功能是内置的已经：

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

另建在功能是ng-class它给你几个选项来有条件地设置一个CSS类，在这里我使用三元版本，但也有其他的方式来使用它。

这里是一个working example

而且，这里是一个good article解释更多ng-class

来源

2014-10-09 06:54:36 aarosil

适用于我，但我并没有真正得到该声明，我假设“$ even”是声明，但为什么第一行被触发为'odd'，而声明是'$ even'？（难以解释这个问题） – 2015-10-29 10:24:08

@JorisDecraecker因为声明应该是：“$ even？'even'：'odd' “（甚至意味着，如果是平等的话，甚至会把课程放在奇数的位置上）。当然，你可以在偶数的时候使用偶数课程，但我同意答案可能有点混乱。 – 2017-01-25 10:01:30

您还可以使用纳克级，甚至和纳克级的奇。

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

来源

2016-05-15 22:12:14

试试这个在CSS：

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

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

你可以第一个项目定义样式：

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

来源

2016-11-18 20:44:24

AngularJS ngRepeat：如何区分偶数/奇数元素？

回答

相关问题