ztech ztech - 3 months ago 19
AngularJS Question

Angular ng loop without a dom element

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>

Answer

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