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-repeat
更改结构

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']
    ];

这是一个吸引你的人 - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview

Answer 2

如果将CheckBoxList拆分为3个部分，则可以在每个div上使用ng-repeat。因此，将checkboxlist更改为：

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" />。

Answer 3

您必须在ng-repeat中跟踪$ index，并在第一组中使用ng-if或ng-show和$index < 3，在第二组中使用$index > 2。

使用AngularJS ng-repeat进行多次迭代

3 个答案: