การใช้งาน modal ใน ionic กับแนวทางการส่งค่าและรับค่า เบื้องต้น

ionic generate page list --no-module

ionic generate page list/add --no-module

ionic generate page list/edit --no-module

    this.datalist = [
      "Monday","Tuesday","Wednesday"
    ]

<ion-header>
  <ion-navbar color="primary">
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>  
    <ion-title>list</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let day of datalist;let i=index">
      <ion-item (press)="editWeekdayModal(i,day)" >
        {{day}}
      </ion-item>
      <ion-item-options side="left">
        <button (click)="removeWeekday(i)" ion-button color="danger">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>    
  </ion-list>

  <ion-fab right bottom>
      <button (click)="openWeekdayModal()" ion-fab color="primary">
        <ion-icon name="add"></ion-icon>
      </button>
  </ion-fab>  
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, ViewController } from 'ionic-angular';

// import page ที่จะใช้งานเป็น modal page ทั้งสองหน้ามาใช้งาน
import { ListAddPage } from '../../pages/list-add/list-add';
import { ListEditPage } from '../../pages/list-edit/list-edit';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {
  
  datalist:string[] = []; // กำหนดตัวแปร array สำหรับเก็บข้อมูล 
  
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public viewCtrl: ViewController 
  ) {
    
	// กำหนดค่าเริ่มต้น 3 ค่า สำหรับวนลูปแสดงรายการ เมื่อเริ่มต้น
    this.datalist = [
      "Monday","Tuesday","Wednesday"
    ]

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListPage');
  }

  // ฟังก์ชั่นสำหรับเปิด modal page เพื่อเพิ่มรายการใหม่
  openWeekdayModal(){
	// สร้าง modal page จาก ListAddPage ไม่มีการส่งค่าใดๆ ไปยัง modal page
    let modal = this.modalCtrl.create(ListAddPage);
    modal.present(); // แสดง modal page
	// เมื่อ modal page ที่เปิดขึนมานี้ถูกปิดลง จะด้วยกดปุ่มปิด หรือหลังจาก Add ข้อมูลใหม่
    //	ให้ทำคำสั่งใน onDidDismiss โดยรับค่าจาก modal
    modal.onDidDismiss((data) => {
      if(data){ // ในที่นี้เมื่อเพื่มข้อมูล ก็จะส่งค่ากลับมาด้วย ถ้ามีค่า 
        this.datalist.push(data); // ก็เพื่มข้อมูลที่กรอกเข้าไปใน array ข้อมูล
      }
    });
  }

  // ฟังก์ชั่นสำหรับเปิด modal page เพื่อแก้ไขรายการข้อมูล มีการส่งค่าผ่าน parameter สองค่า
  editWeekdayModal(id,day){
	// กำหนดตัวแปร เพื่อรับค่าจาก parameter ที่ส่งเข้ามา ในที่นี้รับ index และ value ของ ข้อมูลที่จะแก้ไข
    let para_data = {
      id:id,
      weekday:day
    };
	// สร้าง modal page จาก ListEditPage คราวนี้มีการส่งค่าเข้าไปใน modal page ด้วย
    let modal = this.modalCtrl.create(ListEditPage,para_data);
    modal.present(); // แสดง modal page
	// เมื่อ modal page ที่เปิดขึนมานี้ถูกปิดลง จะด้วยกดปุ่มปิด หรือหลังจาก Edit ข้อมูล
    //	ให้ทำคำสั่งใน onDidDismiss โดยรับค่าจาก modal	
    modal.onDidDismiss((data) => {
	// ในการแก้ไข เราได้ส่งค่า index และค่าข้อมูลใหม่ กลับมาด้วยในรูปแบบ object
      if(data){ // ถ้ามีข้อมูลส่งกลับมา
        this.datalist[data.id]=data.weekday; // อัพเดทค่า ของรายการ array ตาม index ที่มีการแก้ไข
      }
    });
  }  

  // จำลองการลบข้อมูล array เมื่อเลือกลบรายการ
  removeWeekday(id){
    this.datalist.splice(id,1);
  }

}

<ion-header>
  <ion-navbar color="danger">
    <ion-title>list/add</ion-title>
    <ion-buttons end>
      <button ion-button icon-only  (click)="closeModal()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>        
  </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-list>
        <ion-item>
          <ion-label fixed>Weekday</ion-label>
          <ion-input type="text" [(ngModel)]="weekday_val" ></ion-input>
        </ion-item>
    </ion-list>
    <div>
        <button (click)="addWeekday()" block ion-button color="danger">ADD</button>
    </div>
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-list-add',
  templateUrl: 'list-add.html',
})
export class ListAddPage {
	// กำหนดตัวแปรมารับค่า input text เชื่อมข้อมูลด้วย ngModel
  weekday_val:string ='';
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController
  ) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListAddPage');
  }

  // ฟังก์ชั่นเพิ่มข้อมูลใหม่ เราจะใช้วิธีส่งค่าข้อมูลใหม่กลับมายังหน้าหลัก
  addWeekday(){
    let data_add = this.weekday_val; // กำหนดค่าข้อมูลที่กรอกไว้ในตัวแปร
    this.closeModal(data_add); // แล้วส่งเข้าฟังก์ชั่น closeModal ที่เราสร้างขึ้น
  }

  // ฟังก์ชั่นปิด modal มีกำหนด parameter แบบมีค่าหรือไม่ก็ได้ สังเกต ? หลัง data
  closeModal(data?){
    let para_data = data; // กำหนดตัวแปรมารับค่า ถ้ามี
	// แล้วส่งค่าจาก modal กลับมายัง page หลัก ผ่าน dismiss ฟังก์ชั่น
    this.viewCtrl.dismiss(para_data);
  }

}

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>list/edit</ion-title>
      <ion-buttons end>
        <button ion-button icon-only  (click)="closeModal()">
          <ion-icon name="close"></ion-icon>
        </button>
      </ion-buttons>        
  </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-list>
        <ion-item>
          <ion-label fixed>Weekday</ion-label>
          <ion-input type="text" [(ngModel)]="weekday_val" ></ion-input>
        </ion-item>
    </ion-list>
    <div>
        <button (click)="editWeekday()" block ion-button color="secondary">Edit</button>
    </div>
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-list-edit',
  templateUrl: 'list-edit.html',
})
export class ListEditPage {
	// กำหนดตัวแปรมารับค่า input text เชื่อมข้อมูลด้วย ngModel
  weekday_val:string ='';
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController
  ) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListEditPage');
	// เนื่องจากเป็นการแก้ไข เราก็จะแสดงข้อมูลเดิมผ่านตัวแปร weekday_val 
	// โดยรับค่าจาก navParams ที่ส่งจากหน้าหลัก มายัง modal page นี้
    this.weekday_val = this.navParams.get('weekday');
  }

  // ฟังก์ชั่นสำหรับแก้ไขข้อมูล
  editWeekday(){
	// เมื่อแก้ไขข้อมูล ก็จะทำการส่งค่าข้อมูลที่แก้ไข กับ ค่า id หรือ index ของ array เดิม
	// กลับมายังหน้าหลัก เพื่ออัพเดทค่าอีกที
    let data_edit = {
      id:this.navParams.get('id'),
      weekday:this.weekday_val
    };
    this.closeModal(data_edit); // โดยส่งเข้าฟังก์ชั่น closeModal ที่เราสร้างขึ้น
  }

  // ฟังก์ชั่นปิด modal มีกำหนด parameter แบบมีค่าหรือไม่ก็ได้ สังเกต ? หลัง data
  closeModal(data?){
    let para_data = data; // กำหนดตัวแปรมารับค่า ถ้ามี
	// แล้วส่งค่าจาก modal กลับมายัง page หลัก ผ่าน dismiss ฟังก์ชั่น
    this.viewCtrl.dismiss(para_data);
  }

}