Javascript 使用Angular ng repeat指令重复时复选框不起作用

您好，我正在使用Angular ng repeat指令创建复选框。但是当单击复选框时，它们没有被选中/取消选中。我也在使用引导css。下面是我使用的代码片段

<div id="regionCheckBox" class="span12">
      <span ng-repeat="region in histCtrl.regions">
            <label for="{{'regionCheckbox'+$index}}" >
                 <input class="checkbox" type="checkbox" name="RegionCheckBox" id="{{'regionCheckbox'+$index}}" value="{{region}}" />
                  {{region}}
            </label>
      </span>
</div>

{{区域}}

以下是通过fire bug检查时生成的代码

<span class="ng-scope" ng-repeat="region in histCtrl.regions">
    <label class="ng-binding" for="regionCheckbox0">
      <div id="uniform-regionCheckbox0" class="checker">
         <span>
           <input id="regionCheckbox0" class="checkbox" type="checkbox" value="ASIA" name="RegionCheckBox" style="opacity: 0;">
         </span>
      </div>
      ASIA
    </label>
</span>

亚洲

我已经尝试过静态代码，它正在工作，下面给出了它的代码片段

<div class="span12">
     <label for="checkbox0">
           <input class="checkbox" id="checkbox0" type="checkbox" name="group"/> test0
     </label>
     <label for="checkbox1">
            <input class="checkbox" id="checkbox1" type="checkbox" name="group"/> test0
     </label>
     <label for="checkbox2">
             <input class="checkbox" id="checkbox2" type="checkbox" name="group"/> test0
     </label>
 </div>

测试0
测试0
测试0

我不明白为什么它不工作，而且点击标签也不会触发点击复选框

---

编辑：这不是角度的问题。我们使用了一个jquery插件，它将为所有表单元素设置样式，并且它正在修改DOM，因此观察到了这种不一致的行为。在使用angular时，请非常小心操作DOM。

如图所示修改代码并参考

id=“regionCheckbox{{{$index}}”

而不是

id=“{{'regionCheckbox'+$index}”

和

至

{{区域}}

只需在标签中添加以下代码，我就可以使用这些代码

<div id="regionCheckBox" class="span12">
  <span ng-repeat="region in histCtrl">
        <label >{{'regionCheckbox'+$index}}
             <input class="checkbox" type="checkbox" name="RegionCheckBox" id="{{'regionCheckbox'+$index}}" value="{{region}}" ng-click="test($index)" />
              {{region}}
        </label>
  </span>

---

我还得到了索引为

的警报，结果相同。我已经使用DOM元素检查器进行了检查，checked属性从true变为false，反之亦然，但它没有反映在UI中，单击label不会触发checkbox checked属性。@saiki4116修改了答案，请参考我提供的链接，将有助于youBootstrap将复选框转换为具有class='checker'的div，其中包含class=（未选中状态）和class=（已选中状态）的子项，但对于使用ng repeat生成的复选框，span没有任何类，并且dom属性更改不会反映在UI上，因为类没有被更改为“”到“checked”，反之亦然

<div id="regionCheckBox" class="span12">
  <span ng-repeat="region in histCtrl">
        <label >{{'regionCheckbox'+$index}}
             <input class="checkbox" type="checkbox" name="RegionCheckBox" id="{{'regionCheckbox'+$index}}" value="{{region}}" ng-click="test($index)" />
              {{region}}
        </label>
  </span>

$scope.histCtrl = ['a','b','c']; 
$scope.test =function(id){alert(id)};