CODEWITHSUNDEEP
angularangular2-forms
Michael
Michael

Reputation: 3608

Angular2 Multi-Select Check Multiple Binding

I'm trying to create a multi-select widget with a hierarchy.

This kind: If you select Food then Bacon and Waffles are also selected, if you uncheck Waffles then Food is also unchecked but Bacon stays the same.

There are lots of similar questions on SO I'm having a hard time evaluating any of the more complex solutions. I'm trying to understand how this works in Angular conceptually.

Given this pseudo model:

options = [
  {"name":"Food", "children": ["Bacon","Waffles"], "parent": null},
  {"name":"Bacon", "children": [], "parent": "Food" }  
  {"name":"Waffles", "children": [], "parent": "Food" }  
];

value = [];

It's easy enough for me to determine that when Food is selected value should be: Food, Bacon, Waffles and when Waffles is unselected value should be Bacon

I want one input to the form to result in multiple changes to the model that are reflected on the form.

How is that expressed in Angular2? Binding to the form results in 1 immediate change to the model, I can then update the model myself using a hack like setTimeout to get out of the current update loop but that just isn't right...

Upvotes: 0

Views: 172

Answers (1)

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

You can easily achieve this in template-driven way with customised two-way binding ngModel:

<label for="food">Food
<input name="food" type="checkbox" [ngModel]="cheese && salami" (ngModelChange)="food=$event" />
<label for="cheese">cheese
<input name="cheese" type="checkbox" [ngModel]="food" (ngModelChange)="cheese=$event" />
<label for="salami">salami
<input name="salami" type="checkbox" [ngModel]="food" (ngModelChange)="salami=$event" />

DEMO

Upvotes: 1

Related Questions