多次反复使用AngularJS纳克重复 [英] Multiple Iterations with AngularJS ng-repeat

问题描述

我搜索了一会儿，确实发现了很多关于多次迭代。问题是，我不明白我的问题一个简单的解决方案。

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.

我有与NG-重复dinamically填充复选框的列表。由于布局的目的，我需要我的时候达到3复选框以创建一个新的 DIV inline-block的。这样的：

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}

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-重复，但没有工作就像我想。

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

如果有人已经有了这场斗争，并可能帮助我将AP preciate它。

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

推荐答案

要做到这一点，你将不得不作出2更新。

To achieve this you will have to make 2 updates.

1. 2纳克重复


2. 更改结构

HTML code

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

JS Code

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

下面是为您plunker - http://plnkr.co/edit/ BWcFI5d02yPkAYDiQxvO？p = preVIEW

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

这篇关于多次反复使用AngularJS纳克重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！