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

Question

您好，我正在使用 Angular ng-repeat 指令创建复选框。但是当单击复选框时，它们不会被选中/取消选中。我也在使用 bootstrap 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>

我不明白为什么它不起作用，而且单击标签也不会触发单击复选框。

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

Answer 1

不需要在标签中使用以下代码即可正常工作

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

在我的 Controller 中

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

我还收到了带有索引的警报