Question

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

食品
- 培根
- 维夫饼干
汽车
- 火柴盒
- 福特

这种：如果你选择食物，那么也选择培根和华夫饼，如果你取消选中华夫饼，那么食物也没有检查，但培根保持不变。

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

鉴于这种伪模型：

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

value = [];

我很容易确定当选择食物时，值应为：Food, Bacon, Waffles，当Waffles未被选中时，值应为Bacon

我希望表单的一个输入导致对表单上反映的模型进行多次更改。

如何在Angular2中表达？绑定到表单导致对模型的立即更改，然后我可以使用类似setTimeout的hack来自己更新模型以退出当前的更新循环，但这不正确......

Answer 1

您可以使用自定义双向绑定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多选检查多重绑定

1 个答案: