在MVC 中, Model 中的內容通常都要透過Binding 才可以顯示出來. 同樣地, 這裡會示範如何利用Angular 做data binding.
- 在之前的例子中, 於/app/theme/layout.component.ts 中修改內容:
import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'layout', templateUrl: '/app/theme/layout.component.html' }) export class LayoutComponent { Name: string; constructor() { this.Name = 'Apple'; } }
- 在/app/theme/layout.component.html 中修改內容如下:
<h4>{{Name}}</h4> <input type="text" [(ngModel)]="Name" id="Name" name="Name" />
用作Binding 的, 主要是ngModel, 而[()] 決定binding 方法為雙向(two-way), {{}} 則為單向 (One-way).
- 執行後, 見到textbox 而內容修改後, 上邊的<div> 能跟著改變, 視為成功.
Leave a Reply