Question

我正在构建时间轴，我想要反转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类（时间轴和时间轴反转）。

我提前感谢你们。

Answer 1

如果你想说，每隔一行使时间轴倒置，你总是可以使用ngRepeat提供的变量。例如：

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

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

Answer 2

您可以使用/FS/data并可能使用

$index

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

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

我不确定您要在哪里申请课程，但如果您想使用ngRepeat更改div元素的类，则可以执行以下操作：

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

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

希望这能回答你的问题。

Answer 3

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

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

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

如何在每个索引中使用不同类的ng-repeat

3 个答案: