Angular ng loop without a dom element

Question

Say I have a block of html like the following and I need to loop through an array of objects and display a label for each option.

I can do this easily using ng-repeat for the labels and the input individually, but in order for my style framework to update the checked input correctly, the input needs to be directly above the label in the document.

How can I do this without wrapping each group of input + label in another dom element? (This would destroy the style of the list as well)

need:

        <input type="radio" name="rGroup" value="1" id="r1" />
        <label class="radio radio-plan-lg" for="r1">
          Billed every<br><span>1 month</span>
        </label>

        <input type="radio" name="rGroup" value="2" id="r2" />
        <label class="radio radio-plan-lg" for="r2">
          Billed every<br><span>3 months</span>
        </label>

        <input type="radio" name="rGroup" value="3" id="r3" />
        <label class="radio radio-plan-lg" for="r3">
          Billed every<br><span>6 months</span>
        </label>

not:

        <input type="radio" name="rGroup" value="1" id="r1" />
        <input type="radio" name="rGroup" value="2" id="r2" />
        <input type="radio" name="rGroup" value="3" id="r3" />

        <label class="radio radio-plan-lg" for="r1">
          Billed every<br><span>1 month</span>
        </label>
        <label class="radio radio-plan-lg" for="r2">
          Billed every<br><span>3 months</span>
        </label>
        <label class="radio radio-plan-lg" for="r3">
          Billed every<br><span>6 months</span>
        </label>

KreepN · Accepted Answer · 2016-08-15 19:07:58Z

2

Use ng-repeat-start:

<input ng-repeat-start="item in array" type="radio" name="rGroup" value="{{item}}" id="r{{item}}" />
<label ng-repeat-end class="radio radio-plan-lg" for="r{{item}}">
  Billed every<br><span>{{item}} month</span>
</label>

See Documentation - Special repeat start and end points

answered Aug 15, 2016 at 19:07

KreepN

8,5981 gold badge43 silver badges58 bronze badges

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

Collectives™ on Stack Overflow

Angular ng loop without a dom element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related