【Angular2】模板语法之 ngModel

NgModel实现双向绑定及其实现原理

讨论[(ngModel)]之前，先讲下属性绑定和事件绑定。

在属性绑定中，值从模型中流动到视图上的目标属性。[]，通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。

在事件绑定中，值从视图上的目标属性流动到模型。()，通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的（反向的）单向数据绑定。

所以，组合[]和()就可以实现双向数据绑定和双向数据流。

当开发一个数据录入表单的时候，我们常常希望既可以显示数据的属性值，当用户更改时，又可以更新数据的属性值。

NgModel指令可以帮我们实现这个需求：

    <input [(ngModel)]="currentHero.firstName">

改用属性绑定和事件绑定

 

<input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">

在一般情况下直接使用[(ngModel)]实现双向数据绑定，有一些特殊情况，比如将用户的输入强制转换成大写字母。

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

综上：其实在我们平常的使用当中，直接使用 [(ngModel)]完全可以满足双向数据绑定的要求，只有一些特殊情况下需要分开写法。

参考资料：
     http://www.jianshu.com/p/45482c299eba
    http://www.cnblogs.com/JennyLin77/p/6141124.html