Question

我通过ng-repeat动态创建materializecss复选框。问题是，在具体化时，复选框标签上的“for”必须与input上的ID相对应：

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

我正在使用ng-repeat生成字段，每个生成的字段集有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>

当ng-repeat创建时，如何更改这些复选框的label for和id？如果我按原样保留，我只能点击创建的第一个复选框。

由于

Answer 1

您可以按如下方式整合ng-repeat的当前索引：

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

检查小提琴：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会生成id，如cbox1，cbox2，cbox3 ...... cboxn

动态生成materializecss复选框

2 个答案: