使用清单模型从空数组中添加/删除数据答案

【问题标题】：Add/Remove data from empty array using checklist-model使用清单模型从空数组中添加/删除数据
【发布时间】：2018-12-21 23:35:06
【问题描述】：

我在 AngularJS 中有一个清单模型表单（多个复选框），需要从数组中读取/添加/删除值。该数组可能没有值，也可能有五个值。数组值为 20、21、22、23、24。每个值对应于五个复选框。如果数组包含“20”，则将检查“20”的复选框输入，等等...

如果我使用 ng-model 而不是 checklist-model，它可以工作。该复选框在加载表单时被选中，因为 formData.observations == 20。当我取消选中框 20 时，会按预期从 formData.observations 数组中删除。

当我使用 checklist-model 时，复选框未被选中，并且单击该框永远不会删除或将值添加到 formData.observations 数组中。

[...html]    
<div class="row">                                    
  <div class="col-md-1 col-sm-1 col-xs-1">                                                   
    <input id="observation" type="checkbox" checklist-model="formData.observations" checklist-value="formData.observations[20]" ng-true-value="[20]" ng-false-value="[]">                                                    
    <label for="smelled_observation"></label>                                                
  </div>                                                 
  <div class="col-md-10 col-md-10 col-xs-10">                                                    
    <label class="filter-label" for="observation">Confirmed</label>                                              
  </div>                                         
</div>

[...service]
formData = {
   version: 1,
   observation: [20],
   actionsTaken: [],
   additionalNotes: 'notes...',
   userName: 'John Doe',
   timestamp: 'ISO8061',
}

当表单加载时，复选框应该被“选中”，因为 formData.observations = 20（这在使用 ng-model 时有效）。

【问题讨论】：

标签： angularjs checkbox checklist-model

【解决方案1】：

我通过删除使其工作：

ng-true-value="[20]" ng-false-value="[]"

并将checklist-value 更改为：

checklist-value="20"

现在的代码如下所示：

 [...html]    
  <div class="row">                                    
  <div class="col-md-1 col-sm-1 col-xs-1">                                                   
  <input id="observation" type="checkbox" checklist model="formData.observations" checklist-value="20">                                                    
    <label for="smelled_observation"></label>                                                
  </div>                                                 
  <div class="col-md-10 col-md-10 col-xs-10">                                                    
    <label class="filter-label" for="observation">Confirmed</label>                                              
  </div>                                         
</div>

[...service]
formData = {
   version: 1,
   observation: [20],
   actionsTaken: [],
   additionalNotes: 'notes...',
   userName: 'John Doe',
   timestamp: 'ISO8061',
}

当页面加载时，复选框被选中，因为清单模型包含[20]。当我取消选中该框时，20 被删除。额外的复选框现在添加/删除到由 checklist-model 指令控制的公共 obj。

【讨论】：