latest Post

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

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

<ion-content padding>
    <ion-card>
        <ion-card-header>
            計數
        </ion-card-header>
        <ion-card-content style="height:54px; font-size:36px">
            {{countValue}}
        </ion-card-content>
    </ion-card>



    <ion-item>
        <button ion-button (click)="clickCount()" style="height:36px; 
        font-size:20px; background-color:#E8591B">一心念佛</button>
    </ion-item>
</ion-content>

2.home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
//---------------------------------------------
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  //--------------------------------------------
  //---- 利用 html 文件中的 {{countValue}} 來綁定
  //--------------------------------------------
  countValue: number = 0;
  //--------------------------------------------
  constructor(public navCtrl: NavController
  {
    // todo
  }
  //--------------------------------------------
  clickCount()
  {
    this.countValue++;
  }
}




About kailotus

kailotus
Recommended Posts × +

0 意見:

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

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