Question

我有html代码，它以网格格式显示内容，即每行有三列的行，每个输入字段都可以检查。但是，我无法使用以下代码检查多个复选框。无论我选择哪个复选框，都只触发并检查列表中的第一个框。其他人仍然是ng-prestine。我的代码会出现什么问题

 <table>
     <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
         <td ng-repeat="allergy in allergyList track by $index">
             <div class="ice-form-checkbox">
                 <input id="condition" ng-model="selectedAllergy" type="checkbox"/><label for="condition"><span>{{allergy.allergyName}}</span></label>
             </div>
         </td>
     </tr>
 </table>

Answer 1

您只将一个变量作为模型提供给复选框。你应该分配一个数组，如下所示:(运行代码片段使其工作）

＆＃13;

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options =         
    [
    	[{id: 1}, {id: 2}, {id: 3}],
        [{id: 4}, {id: 5}, {id: 6}],
        [{id: 9}, {id: 8}, {id: 9}]
    ];
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="row in options">
      <td ng-repeat="item in row">
        <p>Op {{item.id}}</p>
        <input ng-model="item.value" type="checkbox" />
      </td>
    </tr>
  </table>

  <div ng-repeat="row in options">{{row}}
    <br>
  </div>
</div>

＆＃13;

Answer 2

模型，selectedAllergy，存在于主范围内。将其设置为＆＃34; allergy.selected＆＃34;。

Answer 3

您正在使用ng-repeat，然后ID上有一个固定的input，因此，每个input allergy in allergyList都会id="condition" HTML不正确

这可能导致只能选择一个复选框的效果。尝试将其更改为班级，看看会发生什么。

HTML复选框 - 允许检查多个复选框

3 个答案: