ng-repeat with two values from array each repeat

Question

I am using bootstrap and would like to ng-repeat through an array but i need to get the 2 values each loop. For the example i wish b.name to be booking[0] and the other b.name to be booking[1]. i am currently adding each row and then adding the value.

<div class="row" ng-repeat="b in booking">
    <div class="col-sm-6">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{b.name}}
        </label>
    </div>
    <div class="col-sm-6">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{b.name}}
        </label>
    </div>
</div>

If it is to create a row with 2 col-sm-6 each time it is usesless, just use one row and loop for col-sm-6 as much as you want — Groben
– Groben, Commented Apr 11, 2017 at 8:46

tanmay · Accepted Answer · 2017-04-11 08:51:19Z

3

Here's what you can do. You put ng-if="$even" so for odd numbers, it won't render it. But, you can render next odd number in same row using {{booking[$index+1].name}}.

Something like this:

<div class="row" ng-repeat="b in booking" ng-if="$even">
    <div class="col-sm-6">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{b.name}}
        </label>
    </div>
    <div class="col-sm-6">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{booking[$index+1].name}}
        </label>
    </div>
</div>

Or, you can loop through col-sm-6 instead of its parent.

edited Apr 11, 2017 at 8:51

answered Apr 11, 2017 at 8:47

tanmay

7,9112 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Groben Over a year ago

Only one who unterstood it was about bootstrap. I like your solution though I would just loop over col-sm-6

Akashii · Accepted Answer · 2017-04-11 08:46:35Z

1

You can try

<div class="row" >
    <div class="col-sm-6" ng-repeat="b in booking | limitTo:2">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{b.name}}
        </label>
    </div>
    <div class="col-sm-6" ng-repeat="b in booking | limitTo:2:2">
        <label><input icheck type="checkbox" ng-model="basicIntake.email_subscription">
            {{b.name}}
        </label>
    </div>
</div>

answered Apr 11, 2017 at 8:46

Akashii

2,2815 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

ng-repeat with two values from array each repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related