สร้างแอพ Ionic ด้วยคำสั่ง
[code]
> ionic start myApp blank
[/code]
แก้ไขไฟล์ src/pages/home/home.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { contacts: any[]; constructor(public navCtrl: NavController) { } ionViewDidLoad() { this.loadcontacts(); } loadcontacts() { this.contacts = [ { title: 'AAA', contact: '111' }, { title: 'BBB', contact: '222' }, { title: 'CCC', contact: '333' }, { title: 'DDD', contact: '444' } ] } } |
บรรทัดที่ 10 : สร้างตัวแปร contacts
บรรทัดที่ 17 : เมื่อโหลดวิวเสร็จ ให้เรียกเมธอด loadcontacts()
บรรทัดที่ 21-26 : กำหนดค่าให้กับตัวแปร contacts
แก้ไขไฟล์ src/pages/home/home.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item *ngFor="let contact of contacts"> <div *ngIf="contact.contact!='222'"> {{contact.title}} {{contact.contact}} </div> <div *ngIf="contact.contact=='222'"> None </div> </ion-item> </ion-list> </ion-content> |
บรรทัดที่ 12 : ตรวจสอบว่า contact ไม่เท่ากับ 222 ให้แท็ก div นี้แสดง (แสดงข้อมูล title และ contact)
บรรทัดที่ 15 : ตรวจสอบว่า contact เท่ากับ 222 ให้แท็ก div นี้แสดง (แสดงคำว่า None)
Link