javascript - 在 AngularJS 中使用复选框时遇到一些困难

Question

我有一个列表，里面填满了从网络服务获取的“过敏”。所以过敏可能看起来像这样:

$scope.formData.allergies = [
  {
    'id' : 1, 
    'description' : 'Potassium Cyanide'
  },
  {
    'id' : 2, 
    'description' : 'Blue ring octopus'
  },
  {
    'id' : 3, 
    'description' : 'Poison dart frog'
  },
];

然后用于填充复选框输入列表:

 <li class="item item-checkbox" ng-repeat="allergy in formData.allergies">
   <label class="checkbox">
     <input type="checkbox" name="selectedAllergies" value="allergy.id">
   </label>
   {{allergy.description | uppercase}}
 </li>

但是我正在努力如何找出用户实际选择的内容？在用户选择几个后执行此操作:

console.log($scope.selectedAllergies);

仅返回未定义...

Answer 1

您的复选框输入有一个值(它将模型设置为什么值)，但没有 ng-model，因此它不知道如何处理该值。

我认为最简单的方法是修改过敏数组，因此您可以使用以下代码:

<li class="item item-checkbox" ng-repeat="allergy in formData.allergies">
    <label class="checkbox">
        <input type="checkbox" name="selectedAllergies" ng-model="allergy.selected">
    </label>
    {{allergy.description | uppercase}}
</li>

如果没有任何值，allergy.selected 应根据复选框状态设置为 true 或 falsey 值。