Javascript 如何对每个索引的不同类使用ng repeat

我正在建立一个时间表，我想反转ng重复中的每一个其他索引。我在两个单独的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>

{{t.FirstName}的答复是：{t.ReplyMessage}


{{t.FirstName}的答复是：{t.ReplyMessage}

我希望它只显示一次相同的列表，但是使用不同的css类（timeline和timeline倒置）

---

我提前感谢大家。

如果你想让时间线每隔一行反转一次，你可以使用ngRepeat提供的变量。 例如：

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

变量列表可在此处找到：

---

如果你想让时间线每隔一行反转一次，你可以使用ngRepeat提供的变量。 例如：

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

变量列表可在此处找到：

---

vicbyte的答案是正确的，但我想添加一点上下文

ng类可用于有条件地应用带有ng repeat中项目的类

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

vicbyte的答案是正确的，但我想添加更多的上下文

ng类可用于有条件地应用带有ng repeat中项目的类

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

您可以使用

$index

并可能执行以下操作

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

更好的选择（在我看来）是使用css类“第n个子”来更改使用css的类。去找找看。我不熟悉堆栈溢出，所以我不确定如何使用JSFIDLE，但您可以使用：

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

---

希望这能回答您的问题。

您可以使用

$index

并可能执行以下操作：

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

更好的选择（在我看来）是使用css类“第n个子”来更改使用css的类。去找找看。我不熟悉堆栈溢出，所以我不确定如何使用JSFIDLE，但您可以使用：

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

---

希望这能回答您的问题。

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