AngularJS ng-repeat 的多次迭代

Question

我搜索了一段时间，确实找到了很多关于多次迭代的内容。问题是我没有找到解决问题的简单方法。

我有一个用 ng-repeat 动态填充的复选框列表。由于布局目的，每当我达到 3 个复选框时，我需要创建一个新的 div inline-block。像那样：

CheckBoxList = {1,2,3,4,5}

<div class="form-group-content">
    <div class="form-col-secondary">
        <ul class="list-checkboxes">
            <li>
                <input type="checkbox"/>1                                           
            </li>
            <li>
                <input type="checkbox"/>2                                           
            </li>
            <li>
                <input type="checkbox"/>3                                           
            </li>
        </ul>
    </div>
    <div class="form-col-secondary">
        <ul class="list-checkboxes">
            <li>
                <input type="checkbox"/>4                                           
            </li>
            <li>
                <input type="checkbox"/>5                                           
            </li>
        </ul>
    </div>
</div>

我尝试使用一个迭代器和两个 ng-repeat 但没有像我想要的那样工作。

如果有人已经经历过这种挣扎并且可以提供帮助，我将不胜感激。

Answer 1

为此，您必须进行 2 次更新。

2 ng-重复
改变结构

HTML代码

<div class="form-group-content">
    <div class="form-col-secondary" ng-repeat="block in blocks">
      <ul class="list-checkboxes">
            <li ng-repeat="checkbox in block">
                 <input type="checkbox{{$index + 1}}"/>  
            </li>
      </ul>
    </div>
</div>

JS代码

$scope.blocks = [
    ['1','2','3'],
    ['4','5']
    ];

这是给你的 plunker - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview

Answer 2

你必须在你的 ng-repeat 和 ng-if 或 ng-show 中按 $index 进行跟踪，第一组为 $index < 3，第二组为 $index > 2。

Answer 3

如果将 CheckBoxList 分成 3 个部分，则可以在每个 div 上使用 ng-repeat。因此，将复选框列表更改为：

divs = [[1,2,3],[4,5,6]];

那么你的 html:

<div class="form-col-secondary" ng-repeat="div in divs">
    <ul class="list-checkboxes">
        <li ng-repeat="checkbox in div">
            <input type="checkbox" ng-attr-id="{{checkbox}}">
        </li>
    </ul>
</div>

这可能不会完全符合您想要的结果，但它反映了您应该能够创建自己的工作版本的原则:-)

编辑

值得注意：据我所知，你不能有 <input type="checkbox1" />，我想你的意思是 <input type="checkbox" id="1" name="checkbox1" />。

AngularJS ng-repeat 的多次迭代

Multiple Iterations with AngularJS ng-repeat

javascript

angularjs

ng-repeat