Angular2 Multi-Select 检查多重绑定

Question

我正在尝试创建一个具有层次结构的多select 小部件。

食物
- 培根
- 华夫饼
汽车
- 火柴盒
- 福特

这种：如果你 select 食物，那么培根和华夫饼也会被 select 编辑，如果你取消选中华夫饼，那么食物也不会被选中，但培根保持不变。

SO 上有很多类似的问题，我很难评估任何更复杂的解决方案。我试图从概念上理解它在 Angular 中的工作原理。

给定这个伪模型：

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

value = [];

我很容易确定当食品 selected 值应该是：Food, Bacon, Waffles 而当 Waffles 未selected 值应该是 Bacon

我希望对表单的一次输入会导致对模型的多项更改反映在表单上。

Angular2 中是如何表达的？绑定到表单会立即对模型进行 1 次更改，然后我可以使用 setTimeout 之类的 hack 自行更新模型以退出当前更新循环，但这是不对的...

Answer 1

您可以通过自定义 two-way 绑定 template-driven 方式轻松实现此目的 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

Angular2 Multi-Select 检查多重绑定

Angular2 Multi-Select Check Multiple Binding

angular2-forms

angular