Multiple Iterations with AngularJS ng-repeat

Question

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.

Answer 1

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

Answer 2

You'll have to track by $index in your ng-repeat and either ng-if or ng-show and $index < 3 for your first set and $index > 2 for the second set.

Answer 3

If you split your CheckBoxList in parts of 3, you can use your ng-repeat on each div. So change checkboxlist to something like:

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

then your 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>

This might nog exactly match what you want as result, but it reflects the principle on which you should be able to create your own working version :-)

Edit

Worth noting: As far as I am aware, you can't have <input type="checkbox1" />, I think you mean <input type="checkbox" id="1" name="checkbox1" /> instead.