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

Question

您好，我正在使用 Angular ng-repeat 指令创建复选框。但是当单击复选框时，它们不会被选中/取消选中。我也在使用引导 css。这是我用过的代码sn-p

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

我尝试过使用静态代码，它正在工作，它的代码 sn-p 如下所示

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

在我的控制器中

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

我也收到带有索引的警报

Answer 2

如图所示修改您的代码并参考this demo of handling checkboxes - angularJS

this also will help

id="regionCheckbox{{$index}}" 而不是id="{{'regionCheckbox'+$index}}" 和

<label for="{{'regionCheckbox'+$index}}" > to <label for="regionCheckbox{{$index}}" >

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