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>

在我的控制器中

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

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

2 个答案: