สร้างตัวแปรชื่อ fullname
และแสดงค่าของตัวแปร fullname
จากนั้นสร้าง input
ขึ้นมาพร้อมกับผูกไวักับตัวแปร fullname
เมื่อแก้ไขข้อความใน input
ค่าของตัวแปร fullname
จะเปลี่ยนไปด้วย
แก้ไขไฟล์ src/pages/home/home.ts
[code]
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
fullname: string;
constructor(public navCtrl: NavController) {
this.fullname = ‘Jack’;
}
}
[/code]
ประกาศตัวแปร fullname
เป็นชนิด string
แก้ไขไฟล์ src/pages/home/home.html
[code]
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>
Fullname: {{fullname}}
</p>
<ion-item>
<ion-label>Fullname</ion-label>
<ion-input type="text" [(ngModel)]="fullname"></ion-input>
</ion-item>
</ion-content>
[/code]
นำตัวแปร fullname
มาแสดงผล
และสร้าง input
โดยที่ผูกไว้กับตัวแปร fullname
เมื่อแก้ไขข้อความใน input
ค่าของตัวแปร fullname
จะเปลี่ยนไปด้วย
[BOXMOBILEDEV] Ionic 3 EP3 : ngModel , ngFor และ Event Click