2017年3月7日 星期二

Ionic 2之Label、Input及Alert元件及ngModel資料綁定

第一版的ngModel資料綁定
1.模擬一個帳號登入的介面,使用ion-label及ion-input及使用ngModel截獲表單元件的輸入值
2.先看看home.html的網頁內容。

<ion-header>
  <ion-navbar>
    <ion-title>Ionic 2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <ion-item>
    <ion-label>請輸入您的帳號</ion-label>
    <ion-input type="text" [(ngModel)]="getName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>請輸入您的密碼</ion-label>
    <ion-input type="password" [(ngModel)]="getPass"></ion-input>
  </ion-item>
  <ion-item>
    <button ion-button (click)="sendInfo()" block>資料送出</button>
  </ion-item>
</ion-content>



home.ts檔案
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from "ionic-angular";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  getName: any;
  getPass: any;
  constructor(public navCtrl: NavController,
              public alertCtrl: AlertController
  {

  }
  //--------------------------------------------
  sendInfo()
  {
    let alertMsg = this.alertCtrl.create(
    {
      title: "登入提示",
      subTitle: "帳號:" + this.getName + "
"
 + "密碼:" + this.getPass
    });
    alertMsg.present();
  }
}


第二版的ngModel資料綁定
home.html檔案
<ion-header>
  <ion-navbar>
    <ion-title>Ionic 2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <ion-item>
    <ion-label>請輸入您的帳號</ion-label>
    <ion-input type="text" [(ngModel)]="info.getName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>請輸入您的密碼</ion-label>
    <ion-input type="password" [(ngModel)]="info.getPass"></ion-input>
  </ion-item>
  <ion-item>
    <button ion-button (click)="sendInfo()" block>資料送出</button>
  </ion-item>
</ion-content>

home.ts檔案
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from "ionic-angular";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  info = 
  {
    getName: "",
    getPass: ""
  }
  constructor(public navCtrl: NavController,
              public alertCtrl: AlertController) 
  {

  }
  //--------------------------------------------
  sendInfo()
  {
    let alertMsg = this.alertCtrl.create(
    {
      title: "登入提示",
      subTitle: "帳號:" + this.info.getName + 
                "<BR>密碼:" + this.info.getPass
    });
    alertMsg.present();
  }
}



沒有留言:

Ionic 2之數據綁定{{data}}

利用數據綁定實作一個念佛機 1.home.html < ion-header >     < ion-navbar >         < ion-title   style = "font-family:微軟正黑體&quo...