IWI IWI - 9 days ago 8
AngularJS Question

Dynamically generate materializecss checkboxes

I am dynamically creating materializecss checkboxes through an ng-repeat. Problem is that in materialize, the 'for' on the checkbox label must correspond with the id on the

input
as such:

<div class="checkbox-patient-info-medical">
<input type="checkbox" id="medical-checkbox">
<label for="medical-checkbox"> Prior Authorization Required*</label>
</div>


I am generating fields with an ng-repeat, and there is 1 textbox for each generated set of field. Code as follows:

<div class="medical-insurance-holder" ng-repeat="person in vm.myData[0].medicalInsuranceContainer track by $index">
<p class="patient-info-holder-text">
RELATIONSHIP TO PATIENT:&nbsp&nbsp&nbsp<b>{{person.relationshipToPatient}}</b>
</p>
<p class="patient-info-holder-text">
GROUP NUMBER:&nbsp&nbsp&nbsp<b>{{person.groupNum}}</b>
</p>
<p class="patient-info-holder-text">
SUBSCRIBER D.O.B:&nbsp&nbsp&nbsp<b>{{person.subscriberDob}}</b>
</p>
<div class="checkbox-patient-info-medical">
<input type="checkbox" id="medical-checkbox"><label for="medical-checkbox"> Prior Authorization Required*</label>
</div>
</div>


How can I change the
label for
and
id
of these checkboxes as the ng-repeat creates them? If I leave it as is, I can only click on the first checkbox created.

Thanks

Answer

You can integrate the current index of the ng-repeat in them as follows:

<div class="checkbox-patient-info-medical">
   <input type="checkbox" id="medical-checkbox{{$index}}">
   <label for="medical-checkbox{{$index}}"> Prior Authorization Required*</label>
</div>

Check fiddle: https://jsfiddle.net/twizzlers/z0meqr6h/1/

Hope it helps =)

Comments