CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
ztech
ztech

Reputation: 560

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>

Upvotes: 0

Views: 227

Answers (1)

KreepN
KreepN

Reputation: 8598

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

Upvotes: 2

Related Questions