Angular 複数チェックボックスを全て選択で切り替え
Vue.jsに続いて、Angularで全て選択を切り替え。
<input type="checkbox" [(ngModel)]="metas.foo">foo<br> <input type="checkbox" [(ngModel)]="metas.bar">bar<br> <input type="checkbox" [(ngModel)]="metas.baz">baz<br> <br> <input type="checkbox" [(ngModel)]="all_checked">all<br>
export class AppComponent { metas = { foo: false, bar: false, baz: false, } get all_checked() { return !Object.values(this.metas).includes(false) } set all_checked(checked) { for (const key of Object.keys(this.metas)) { this.metas[key] = checked } } }
Vue.jsの場合、複数チェックボックスの選択値を配列で双方向バインドできるんだけど、Angularはできないのかなぁ…。
AngularのngModelはgetter, setterと相性がいいように感じました。