PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

24 January 2018 By Ninenik Narkdee
ionic native modal

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionic native modal



เนื้อหาในบทความต่อไปนี้ เราจะดูส่วนของการใช้งานที่มักพบเห็นบ่อย และใช้ในการแสดงเนื้อหาหรือข้อมูล
ที่ต้องการแสดงเพิ่มเติม โดยยังอยู่ในการใช้งานเบื้องต้นอยู่ ยังไม่ได้เข้าไปใช้งานในส่วนของ native plugin 
แต่อย่างใด 
    แนวทางการใช้งานจะแสดงตัวอย่างการใช้งาน modal ซึ่งเป็นส่วนของเนื้อหาเพิ่มเติม ที่แสดงอยู่บน
หน้า page ปัจจุบันอีกที ปกติจะใช้กับการแสดงตัวเลือกเพิ่มเติม หรือสำหรับการเพิ่มหรือแก้ไขข้อมูล เป็นต้น
จะขอต่อยอดจากบทความตอนที่ผ่านมา โดยเราจะเพิ่มเมนู List เข้าไปใน sidemenu ดังรูป

 
 


 
 
    สิ่งที่เราจะทำคือ เราจะสร้าง page ขึ้นมา 3 page ประกอบด้วย list, list-add และ list-edit โดยใช้คำสั่งดังนี้
 
ionic generate page list --no-module
ionic generate page list/add --no-module
ionic generate page list/edit --no-module
 
โครงสร้างไฟล์ในโฟลเดอร์ 'pages' จะเป็นดังรูป


 

 
 
หรือใครจะสร้างเป็น page ใหม่เพื่อทดสอบตามโดยไม่กำหนดต่อจากบทความที่ผ่านมาก็ได้
 
โดยใน page list จะจำลองการแสดงข้อมูลรายการชื่อ จะกำหนดเป็นค่า array มีข้อมูลค่าเริ่มต้นไว้ 3 ค่า
 
    this.datalist = [
      "Monday","Tuesday","Wednesday"
    ]
 
มีการใช้งานปุ่ม FABs  (Floating Action Buttons) เป็นปุ่มสำหรับเปิดหน้า modal page เพื่อเพิ่มค่าใหม่เข้าไป ดังรูป

 
 


 
 
เราสามารถปัดรายการ weekday ไปทางขวา แล้วขึ้นเมนูทางซ้าย เพิ่มเติมเพื่อทำการลบรายการนั้นๆ ได้

 
 


 
 
เมื่อเรากดที่ปุ่มเพิ่มรายการใหม่ ก็จะแสดง modal page ที่ชื่อ ListAddPage ขึ้นมาดังรูป

 
 


 
 
มีช่องสำหรับกรอกวัน ที่เราต้องการเพิ่มใหม่เข้าไป เมื่อกรอกข้อมูล และกดปุ่ม ADD ข้อมูลวันจาก modal page
ก็จะถูกส่งกลับมายังหน้า ListPage หลัก ในขั้นตอนนี้เราจะได้รู้จักวิธีการส่งค่าจาก modal page กลับมายังหน้า page
ปกติ 
 
สำหรับการแก้ไขนั้น เรากำหนดให้ใช้ การกดค้างที่รายการใน page หลัก (การกดค้าง ไม่เหมือนกับการคลิก) โดยใช้
press event หากกดค้างที่รายการใด ก็จะทำการแสดงหน้าแก้ไข ของรายการนั้นๆ โดยจะทำการเปิด modal page อีก
page ขึ้นมาสำหรับแก้ไข ซึ่งเราใช้ ListEditPage ในขั้นตอนนี้เราจะได้รู้จักวิธีการส่งค่าจาก page หลัก มาใช้งานใน
modal page ดังรูป

 
 

 
 
 
ต่อไปเรามาดูในส่วนของการกำหนดโค้ดในหน้าต่างๆ  โดยคำอธิบายจะแสดงในโค้ด เริ่มที่ไฟล์แรก
 
ไฟล์ list.html 
 
<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>
 
จากโค้ดส่วนของหน้า view เราจะเห็นว่ามีการใช้งาน <ion-fab> สำหรับเป็นปุ่มเพิ่มรายการและเปิด modal page
มีการใช้งาน <ion-item-sliding> สำหรับให้สามารถทำการปัดรายการข้อมูลไปทางซ้ายหรือทางขวา แล้วขึ้น เมนู
เพิ่มเติมให้เลือกทำงานผ่าน <ion-item-options> ในตัวอย่างเรากำหนดให้เมื่อปัดรายการไปด้านซ้าย ให้ขึ้นปุ่มลบ
ข้อมูล เมื่อเราคลิกที่ปุ่ม ก็จะส่งค่า i ซึ่งเป็น index key ของข้อมูล array ไปใช้ในการลบข้อมูล
    ในส่วนของ <ion-item> โดยทั่วไป ถ้าไม่มีการใช้งาน <ion-item-sliding> เรามักจะทำการวนลูปด้วย ngFor ใน
ส่วนนี้ แต่ในกรณีนี้เราใช้การวนลูปใน <ion-item-sliding> แทน  สำหรับ <ion-item> เราเพิ่ม press event เข้าไป
ในรายการ คือเมื่อกดค้างรายการใดๆ แล้วให้ทำการเรียกใช้ฟังก์ชั่น editWeekdayModal(i,day) ซึ่งฟังก์ชั่นนี้ จะไปทำ
การเปิด modal page ขึ้นมาเพื่อแก้ไข โดยมีการส่งค่า i และ day ซึ่งเป็น index key และ ค่า day ข้อมูลชื่อวันเข้า
ไปในฟังก์ชั่น เพื่อส่งต่อไปยัง modal page อีกที
 
ต่อไปเรามาดูต่อที่ไฟล์ list.ts เป็นไฟล์สำหรับจัดการหลัก คำอธิบายจะแสดงในโค้ด
 
ไฟล์ list.ts 
 
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);
  }

}
 
ต่อไปมาดูในส่วนของ modal page แรก ที่เป็นหน้า เพิ่มรายการข้อมูลใหม่ 
 
ไฟล์ list-add.html
 
<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>
 
ใน modal page นี้เรามีการสร้างปุ่มปิด ไว้มุมบนขวาของ <ion-navbar> โดยเมื่อคลิก ก็จะไปเรียกคำสั่ง 
closeModal() เพื่อปิดหน้า modal page นอกจากนั้น ยังมีการใช้งาน input text เพื่อรับข้อมูลทีผู้ใช้กรอก 
โดยใช้งานการเชื่อมโยงข้อมูลกับค่า property ของ page component ที่ชื่อ 'weekday_val' ผ่าน ngModel 
และมีปุ่ม ที่เมื่อผู้ใช้ click ก็จะไปทำคำสั่งของฟังก์ชั่น addWeekday() ที่อยู่ไฟล์โค้ดส่วนจัดการชื่อ list-add.ts
 
ไฟล์ list-add.ts
 
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);
  }

}
 
ส่วนสุดท้าย modal page ที่สอง โดยสำหรับ modal page นี้ หน้าตาก็แทบจะเหมือนหน้า modal page แรก
แต่มีการปรับให้แตกต่างกันเล็กน้อย ลักษณะก็จะเป็นการสร้าง input text เพื่อแสดงค่าข้อมูลเดิม ที่จะแก้ไข
 
ไฟล์ list-edit.html
 
<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>
 
มีปุ่มปิดเช่นเดียวกับ modal page แรก มีการเชื่อมโยงข้อมูลผ่าน ngModel และเมื่อคลิกที่ปุ่ม Edit ก็จะไป
ทำคำสั่ง editWeekday() ในไฟล์ list-edit.ts
 
ไฟล์ list-edit.ts
 
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);
  }

}
 
เหล่านี้ คือตัวอย่างการใช้งาน modal page การรับส่งค่าจาก page หลักไปยัง modal page และการส่งค่าจาก
modal page มายัง page หลัก โดยในการส่งค่ากลับมายัง page หลักนั้น จะส่งเข้าไปในฟังก์ชั่น dismiss()
ที่อยู่ใน modal page ส่วนการรับค่าใน page หลักนั้น จะรับค่าผ่าน onDidDismiss() ของ modal เมื่อถูกปิดลง
    นอกจากเราได้รุ้จักการใช้งาน modal และ เรายังได้รู้จักกับการใช้งาน <ion-input> ที่มีการเชื่อมโยงข้อมูล
ผ่าน ngModel จะเห็นว่ารูปแบบการกำหนดค่า นั้นจะแตกต่างจากการกำหนดเป็น input type text ธรรมดา
 
    เนื้อหาในตอนหน้า จะเป็นการประยุกต์การใช้งานเบื้องต้นเกี่ยวกับ component ใด รอติดตาม
 




อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: ionic native modal




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง