Angular2.0 基础：双向数据绑定 [(ngModel)]

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

而在事件绑定中，值是从屏幕上的目标属性到 model。通过把属性名括在圆括号中来标记的这个是 view 到 model 的反向数据绑定

而[()] 的组合来标记双向数据的绑定和数据流动。

就如同我们先用[ngModel]=“model.name”对其进行model 到 view 的数据绑定,然后再用ngModelChange 事件对视图的数据变化进行监控

（ngModelChange）="model.name=$event"

NOTE:

ngModelChange 并不是<input>元素的事件。他实际上是NgModel 指令的事件属性。当angular 在表单中看到[(x)]的绑定目标时，它

会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。

模板表达式中的另一个古怪之处是model.name = $event。之前看到的$event对象来自 DOM 事件。但ngModelChange属性不会生成 DOM 事件

它是Angular EventEmitter类型的属性，当它触发时，它返回的是输入框的值 —— 也正是希望赋给模型name属性的值。但在实际中几乎总是优先使用

[(ngModel)]形式的双向绑定。只有当需要在事件处理函数中做一些特别的事情（例如合并或限制按键频率）时，才会拆分出独立的事件处理函数

{{diagnostic}}
<div class="container">
    <h1>Hero Form</h1>
    <form>
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required
                   name ="name" [(ngModel)]="model.name">
        </div>
        <div class="form-group">
            <label for="alterEgo">Alter Ego</label>
            <input type="text" class="form-control" id="alterEgo"
                   [(ngModel)]="model.alterEgo" name ="alterEgo">
        </div>
        <div class="form-group">
            <label for="power">Hero Power</label>
            <select  id="power" class="form-control" required
            [(ngModel)]="model.power" name ="power">
                <option *ngFor ="let pow of powers" [value]="pow">{{pow}}</option>
            </select>
        </div>
        <button class="btn btn-default" (click)="onSubmit()">Submit</button>
    </form>
</div>