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>