AngularJS ng-repeat 的多次迭代 [英] Multiple Iterations with AngularJS ng-repeat

问题描述

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

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

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

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

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

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

解决方案

要实现此目的，您必须进行 2 次更新.

1. 2 ng-repeat
2. 改变结构

HTML 代码

<div class="form-col-secondary" ng-repeat="block in blocks"><ul class="list-checkboxes"><li ng-repeat="块中的复选框"><input type="checkbox{{$index + 1}}"/>

JS代码

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

这里有一个 plunker - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=预览

I've searched for a while and did find a lot about multiple iterations. The problem is that i don't see a plain solution for my problem.

I have a list of checkbox that is filled dinamically with ng-repeat. Due to layout purposes i need to create a new div inline-block whenever i reach 3 checkboxes. Like that:

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>

I tried using a iterator and two ng-repeat but didn't work like i wanted to.

If somebody already had this struggle and could help i would appreciate it.

解决方案

To achieve this you will have to make 2 updates.

1. 2 ng-repeat
2. Change structure

HTML Code

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

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

Here is a plunker for you - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview

这篇关于AngularJS ng-repeat 的多次迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！