Question

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

如果我使用ng-model而不是checklist-model，它将起作用。由于formData.observations == 20，因此在加载表单时选中了该复选框。当我取消选中该复选框时，如预期的那样，从formData.observations数组中删除了20个框。

当我使用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时有效）。

Answer 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中。

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

1 个答案: