Добавить / удалить данные из пустого массива с помощью контрольной модели

Question

У меня есть форма модели контрольного списка (несколько флажков) в AngularJS, которая должна читать / добавлять / удалять значения из массива.Массив может не иметь значения или может иметь пять значений.Значения массива составляют 20,21,22,23,24.Каждое значение соответствует пяти флажкам.Если массив содержит «20», то флажок для ввода «20» будет проверен, и т. Д.Флажок отмечен при загрузке формы, потому что formData.observations == 20. Когда я снимаю флажок, флажок 20 удаляется из массива formData.observations, как и ожидалось.

Когда я использую модель контрольного списка, флажок не проверяетсяи нажатие поля никогда не удаляет и не добавляет значение в массив 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-модель).

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.