javascript - 交替 ng 重复

Question

有没有办法在 AngularJS 中替代 ng-repeats ？

例如，假设我有两个数组。

数组1

[a1, a2, a3, ...]

数组2

[b1, b2, b3, ...]

我想针对中型和大屏幕尺寸以交替方式显示这些值，例如...

输出

Array 1 Values    Array 2 Values
a1                b1
a2                b2
a3                b3
...               ...

理论上，HTML 看起来像

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h1 class="col-*-12">Array 1 values</h1>
    <div ng-repeat="a in arr1">
        <div class="col-*-12">{{a.value}}</div>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h1 class="col-*-12">Array 2 values</h1>
    <div ng-repeat="b in arr2">
        <div class="col-*-12">{{b.value}}</div>
    </div>
</div>

因此，对于较小的屏幕尺寸，我希望 Array1 中的标题和值显示在顶部，Array2 中的标题和值显示在底部。

小屏幕尺寸的输出

Array 1 Values
a1 
a2
a3
...

Array 2 Values
b1
b2
b3
...

我想避免嵌套ng-repeats。理论上，上面的 HTML 代码是理想的，但我认为它不起作用，因为它输出第一个数组中的所有值，然后输出第二个数组中的所有值。如果我能让它们在每个值之后交替出现，那就太好了。也许我可以像这样加入两个数组:[a1, b1, a2, b2, ...]，但是我认为让标题以我想要的方式显示会出现问题他们到。

关于如何运作有什么想法吗？

Answer 1

一种可能的解决方案:

<div class="row" ng-repeat="item in array1">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h1 class="col-*-12">Array 1 values</h1>

            <div class="col-*-12">{{array1[$index].value}}</div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h1 class="col-*-12">Array 2 values</h1>

            <div class="col-*-12">{{array2[$index].value}}</div>

    </div>
</div>