javascript - 如何将数组数据模型中的交替元素放入基于列的布局中？

Question

$scope 中有一个动态数组，HTML 模板中有三列。数组中的元素需要以 HTML 形式呈现，如下所示:

<div class="first-column">
  <div><!--element of (index + 3) % 3 === 0 will be placed here--></div>
</div>

<div class="second-column">
  <div><!--element of (index + 3) % 3 === 1 will be placed here--></div>
</div>

<div class="third-column">
  <div><!--element of (index + 3) % 3 === 2 will be placed here--></div>
</div>

请注意，三列仅出现一次。每个元素将根据其与表达式匹配的索引放置在特定列中。

当然，我可以使用三个 ng-repeat 声明来实现它，但出于性能考虑，我希望仅使用单个 ng-repeat 来实现它。

任何想法都会受到赞赏。

Answer 1

使用嵌套的 ng-repeat 来调节列中的每个项目；假设这样一个模型:

columns: [1,2,3],
items: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

您的 View 将如下所示:

<div class="col-xs-4" ng-repeat="c in columns">
    <h1>Column {{ (outerIndex = $index) && c || c }}</h1>
    <div class="item" ng-repeat="i in items" 
                      ng-if="$index % columns.length === outerIndex">
        <!-- whatever -->
    </div>
</div>

请注意我们如何将新变量 (outerIndex) 注入(inject)外部循环作用域，以便与内部循环的 $index 结合使用以实现交替条件。

单击下面的大演示按钮以查看其实际效果(我们在这里依赖 bootstrap-css，只是为了演示布局中的列)。

<小时/>

TL;DR，Gimmi tha demo!

     Big Demo Button