動態生成materializecss複選框

Question

我通過ng-repeat動態創建materializecss複選框。問題是，在實現，所述「關於」複選框標籤上必須與該ID對input這樣對應：

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

我生成與NG-重複場，且有1個文本框用於每個所產生的一套領域。代碼如下：

<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> 

我怎樣才能改變這些複選框的label for和id爲NG-重複創建它們？如果我保持原樣，我只能點擊創建的第一個複選框。

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

檢查小提琴：

感謝

Answer 1

您可以在其中如下NG重複的當前索引整合https://jsfiddle.net/twizzlers/z0meqr6h/1/

希望它可以幫助=）

Answer 2

我們需要輸入和標籤要使用AngularJS動態地爲materializecss生成複選框。使用下面的代碼動態生成複選框。

 <tbody> 
     <tr ng-repeat="x in data"> 
     <td>{{x.name}}</td> 
     <td>{{x.phone}}</td> 
     <td> 
     <input type="checkbox" id="cbox{{$index}}" /> 
     <label for="cbox{{$index}}"></label> 
     </td> 
     </tr> 
    </tbody> 

如果您沒有使用for的標籤，那麼您將無法獲得複選框。

這裏CBOX會產生像cbox1，cbox2，cbox3 IDS ..... cboxn