我如何对每个索引使用具有不同类的 ng-repeat答案

【问题标题】：How do i use a ng-repeat with different classes with each index我如何对每个索引使用具有不同类的 ng-repeat
【发布时间】：2017-12-08 22:08:32
【问题描述】：

我正在构建一个时间线，我想反转 ng-repeat 中的所有其他索引。我在两个单独的 div 上使用了 ng-repeat-start 和 ng-repeat-end，但它们所做的只是重复同一个数组两次。

<ul class="timeline">
    <li ng-repeat-start="t in vm.patientTimeLine">
        <div class="timeline-badge" style="background-color:#f9f9f9!important;"><i class="fa fa-phone hg-blue" aria-hidden="true"></i></div>
            <div class="card-block">
                 <h4 class="card-title"> {{t.FirstName}}'s reply was: <b ng-if="t.ReplyMessage !== null" class="stop">{{t.ReplyMessage}}</b></h4>
            </div>
     </li>

     <li class="timeline-inverted" ng-repeat-end>
        <div class="timeline-badge" style="background-color:#f9f9f9!important;"><i class="fa fa-phone hg-blue" aria-hidden="true"></i></div>
           <div class="card-block">
               <h4 class="card-title"> {{t.FirstName}}'s reply was: <b ng-if="t.ReplyMessage !== null" class="stop">{{t.ReplyMessage}}</b></h4>
           </div>
     </li>
</ul>

我希望它显示一次相同的列表，但使用不同的 css 类（时间轴和时间轴倒置）。

提前谢谢你们。

【问题讨论】：

如果您发现这些答案中的任何一个有帮助，请选择一个作为答案。谢谢！

标签： javascript css angularjs angularjs-directive

【解决方案1】：

如果您想说，每隔一行将时间线反转，您可以随时使用 ngRepeat 提供的变量。例如：

$even   boolean     true if the iterator position $index is even (otherwise false).

变量列表可以在这里找到： https://docs.angularjs.org/api/ng/directive/ngRepeat

【讨论】：

【解决方案2】：

vicbyte 的回答是正确的，但我想补充一点上下文。

ng-class 可用于有条件地应用具有 ng-repeat 中的项目的类。

<li ng-repeat="i in items" ng-class="{ 'inverted': $even }"></li>

【讨论】：

【解决方案3】：

您可以使用$index 并可能做一个

ng-class="{'timeline': $even, 'timeline-inverted': $odd}"

更好的选择（在我看来）是使用 css 类“nth-child”来改变使用 css 的类。查看W3Schools nth-child 以找到它。我是堆栈溢出的新手，所以我不确定如何使用 JSFiddle，但您可能会使用：

.timeline-inverted :nth-child(even) // Even Elements

.timeline-inverted :nth-child(odd) // Odd Elements

我不确定你想在哪里应用这个类，但是如果你想用你的 ngRepeat 改变一个 div 元素的类，你可以执行以下操作：

.timeline-inverted div:nth-child(even)
.timeline-inverted div:nth-child(odd)

希望这能回答你的问题。

【讨论】：