json - Angular 2 : Get Values of Multiple Checked Checkboxes

Question

我的问题很简单:我有一个这样的复选框列表:

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

我想发送一组选定选项，例如:[option1, option5, option8] 如果选择了选项 1、5 和 8。这个数组是我想通过 HTTP PUT 请求发送的 JSON 的一部分。

感谢您的帮助!

Answer 1

这是使用 ngModel (final Angular 2) 的简单方法

<!-- my.component.html -->

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options">
        <label>
            <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

---

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}