Question

在执行ng-repeat时，是否可以根据某些条件更改元素顺序？

假设我们有这样的代码：

<div ng-repeat="i in [1,2,3,4,5,6,7]">
   <div class="element-1">Element 1: {{i}}</div>
   <div class="element-2">Element 2: {{i}}</div>
</div>

现在，当element-*为偶数时，我希望更改divs i的顺序。有可能吗？

输出：

<div>
   <div class="element-1">Element 1: 1</div>
   <div class="element-2">Element 2: 1</div>
</div>

<div>
   <div class="element-2">Element 2: 2</div>
   <div class="element-1">Element 1: 2</div>
</div>

<div>
   <div class="element-1">Element 1: 3</div>
   <div class="element-2">Element 2: 3</div>
</div>

<div>
   <div class="element-2">Element 2: 4</div>
   <div class="element-1">Element 1: 4</div>
</div>

......等等。

[编辑]

我想避免为float: right添加element-1的解决方案。

我还想避免重复HTML代码（创建第二个块）。这是我的问题的一个简单示例。我的项目要复杂得多（代码量大）。

Answer 1

使用两个单独的容器ng-hide或ng-if来实现您的目标：

<div ng-repeat="i in [1,2,3,4,5,6,7]">
   <div ng-if="i % 2 == 0">
       <div class="element-1">Element 1: {{i}}</div>
       <div class="element-2">Element 2: {{i}}</div>
   </div>
   <div ng-if="i % 2 != 0">
       <div class="element-2">Element 2: {{i}}</div>
       <div class="element-1">Element 1: {{i}}</div>
   </div>
</div>

Answer 2

你应该使用ng-if over ng-show / ng-hide，因为它可以让你的DOM更小更干净。你必须要注意ng-if

的可能范围问题

<div ng-repeat="i in [1,2,3,4,5,6,7]">

   <div class="element-1" ng-if="$index % 2 === 0">Element 1: {{i}}</div>
   <div class="element-2" ng-if="$index % 2 === 0">Element 2: {{i}}</div>

   <div class="element-2" ng-if="$index % 2 === 1">Element 2: {{i}}</div>
   <div class="element-1" ng-if="$index % 2 === 1">Element 1: {{i}}</div>

</div>

更改Angular的ng-repeat中的元素顺序

2 个答案: