在角的ng重复中改变元素顺序

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>

..。等。

编辑

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

我还想避免重复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-如果超过ng-显示/ng-隐藏，因为它使您的DOM更小和更干净。您必须小心ng-如果可能的范围问题。

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