ใช้งาน Popover สร้างเงื่อนไข การดึงข้อมูลด้วย Provider ใน ionic

<?php
header('Access-Control-Allow-Origin: *'); 
header("Content-type:application/json; charset=UTF-8");    
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false); 
require_once("dbconnect.php");
$json_data = array();
$more_sql = "";
// ถ้ามีการส่งคำค้นหามา และไม่ใช่ค่าว่าง
if(isset($_GET['queryString']) && $_GET['queryString']!=""){
	$more_sql = " AND province_name LIKE '%".trim($_GET['queryString'])."%' ";
}
$sort = "";
// ถ้ามีการส่งค่าเงื่อนไขการเรียงข้อมูลมา และไม่ใช่ค่าว่าง
if(isset($_GET['sorttype']) && $_GET['sorttype']!=""){
	$sort = " ORDER BY ".$_GET['sorttype']." ";
}
$sql = "
SELECT * FROM tbl_provinces WHERE 1 $more_sql $sort
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "id" => $row['province_id'],
            "name" => $row['province_name'],
            "geo_id" => $row['geo_id']                
        );
    }
}
// แปลง array เป็นรูปแบบ json string  
if(isset($json_data)){  
    $json= json_encode($json_data);    
    if(isset($_GET['callback']) && $_GET['callback']!=""){    
    echo $_GET['callback']."(".$json.");";        
    }else{    
    echo $json;    
    }    
}
?>

ionic generate provider province-service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ProvinceServiceProvider {

  constructor(public http: HttpClient) {
    console.log('Hello ProvinceServiceProvider Provider');
  }

  getProvince(q?:any,sort?:any){
    return this.http.get('http://localhost/demo/api.php',{
      params: {
        queryString: q!=null?q:'',
        sorttype: sort!=null?sort:''
      }
    }
    );   
  }
 
}

SELECT * FROM tbl_provinces WHERE 1 ORDER BY province_id DESC

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpClientModule } from '@angular/common/http';
 
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AboutPage } from '../pages/about/about';
import { SettingPage } from '../pages/setting/setting';
import { HelpPage } from '../pages/help/help';
import { TabsPage } from '../pages/tabs/tabs';
import { ListPage } from '../pages/list/list';
import { ListAddPage } from '../pages/list-add/list-add';
import { ListEditPage } from '../pages/list-edit/list-edit';
import { ProvincePage } from '../pages/province/province';
import { PopoverPage } from '../pages/popover/popover';

import { ProvinceServiceProvider } from '../providers/province-service/province-service';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AboutPage,
    SettingPage,
    HelpPage,
    TabsPage,
    ListPage,
    ListAddPage,
    ListEditPage,
    ProvincePage,
    PopoverPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AboutPage,
    SettingPage,
    HelpPage,
    TabsPage,
    ListPage,
    ListAddPage,
    ListEditPage,
    ProvincePage,
    PopoverPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ProvinceServiceProvider,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ProvinceServiceProvider
  ]
})
export class AppModule {}

ionic generate page popover --no-module

import { Component } from '@angular/core';
import { NavController, NavParams, PopoverController } from 'ionic-angular';
// มีการใช้งาน PopoverController
// import service และ popover page มาใช้งาน
import { ProvinceServiceProvider } from '../../providers/province-service/province-service';
import { PopoverPage } from '../popover/popover';

@Component({
  selector: 'page-province',
  templateUrl: 'province.html',
})
export class ProvincePage {

	// กำหนดตัวแปร สำหรับค่าต่างๆ 
  public queryText:string = ''; // เก็บข้อความที่ใช้ค้น
  public results:any; // ไว้รับข้อมูล
  public sorttype:string = 'province_id ASC'; // เก็บรุปแบบเงื่อนไขการเรียงข้อมูล

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public popoverCtrl: PopoverController, // inject PopoverController มาใช้งาน
    public provinceService:ProvinceServiceProvider // inject ProvinceServiceProvider มาใช้งาน
  ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProvincePage');
	// เมื่อเข้ามาใน province page ให้ทำการดึงข้อมูลมาแสดงทันที
    this.provinceService.getProvince().subscribe((data) =>{
      this.results = data;
    });
  

  }

  // ฟังก์ชั่นคำสั่งสำหรับแสดง popover page มีการรับค่า $event object ผ่านตัวแปร ev
  openFilter(ev:any){
  // กำหนด option ให้กับ popover ที่จะสร้าง ในที่นี้ส่ง cssClass 
  // เข้าไปเพื่อกำหนดพื้นหลังสีทิบมี popover แสดง
    let popoverOpt = {
      cssClass: 'backdropOpacityPopover'      
    }
	// กำหนดตัวแปร ที่จะส่งไปยัง popover ในที่นี้เราส่งค่าเริ่มต้นการจัดเรียงข้อมูลไป
    let popoverData = {
      sorttype:this.sorttype
    }
	// กำหนดตัวแปรสร้าง popover มีส่งค่า และกำหนด option 
    let popover = this.popoverCtrl.create(PopoverPage,popoverData,popoverOpt);
    popover.present({
      ev: ev // แสดง popover และส่งค่า $event object ผ่านตัวแปร ev เข้าไปด้วย
    }); 
	// การส่ง $event object เข้าไปใน popover จะทำให้สามารถอ้างอิงตำแหน่งของปุ่ม ทำให้ popover แสดง
	// ที่ตำแหน่งปุ่มบน ในตัวอย่าง เราจะ comment  // ev:ev เพื่อให้ popover แสดงตรงกลางแทน
	
	// กำหนด event เมื่อ popover ปิดลง ให้รับค่า รูปแบบการจัดเรียง ถ้ามีการส่งค่ากลับมา
    popover.onDidDismiss((data)=>{
      if(data){
        this.sorttype = data.sorttype;
      }
      this.getItems(); // ทำการดึงข้อมูล
    });
  } 

  // ฟังก์ชั่นดึงข้อมูล โดยเรียกใช้ผ่าน provinceService อีกที
  getItems(){
    let q = this.queryText;
    let sort = this.sorttype;
    this.provinceService.getProvince(q,sort)
    .subscribe((data) =>{
      this.results = data;
    });
  }

}

page-province {

}
.backdropOpacityPopover {
    ion-backdrop {
        opacity: 0.4 !important;
    }
}

<ion-header>
    <ion-navbar color="primary">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>   
    <ion-title>province</ion-title>
    <ion-buttons end>
        <button ion-button icon-only (click)="openFilter($event)">
          <ion-icon name="funnel"></ion-icon>
        </button>
      </ion-buttons>    
  </ion-navbar>
  <ion-toolbar no-border-top>
      <ion-searchbar color="primary"
                     [(ngModel)]="queryText"
                     (ionInput)="getItems()"
                     placeholder="Search">
      </ion-searchbar>
    </ion-toolbar>  
</ion-header>
 
<ion-content>
  <ion-list>
    <ion-item  *ngFor="let province of results;let i=index" >
    {{province.name}}
    </ion-item>
  </ion-list>
</ion-content>

<ion-list radio-group  [(ngModel)]="sorttype">
  <ion-item-divider color="light">เรียงข้อมูลจาก</ion-item-divider>    
  <ion-item> 
      <ion-icon name="arrow-down" item-start></ion-icon>
      <ion-label>ไอดีจังหวัด</ion-label>
      <ion-radio (ionSelect)="closePopover()" [checked]="sorttype=='province_id ASC'" 
      value="province_id ASC"></ion-radio>    
    </ion-item>
    <ion-item> 
      <ion-icon name="arrow-up" item-start></ion-icon>
      <ion-label>ไอดีจังหวัด</ion-label>
      <ion-radio (ionSelect)="closePopover()" [checked]="sorttype=='province_id DESC'" 
      value="province_id DESC"></ion-radio>    
    </ion-item>     
  <ion-item> 
    <ion-icon name="arrow-down" item-start></ion-icon>
    <ion-label>ชื่อจังหวัด</ion-label>
    <ion-radio (ionSelect)="closePopover()" [checked]="sorttype=='province_name ASC'" 
    value="province_name ASC"></ion-radio>    
  </ion-item>
  <ion-item> 
    <ion-icon name="arrow-up" item-start></ion-icon>
    <ion-label>ชื่อจังหวัด</ion-label>
    <ion-radio (ionSelect)="closePopover()" [checked]="sorttype=='province_name DESC'" 
    value="province_name DESC"></ion-radio>    
  </ion-item>    
</ion-list>

[checked]="sorttype=='province_name DESC'"

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

@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {

// กำหนดตัวแปร สำหรับเก็บค่า radio value
  public sorttype:string;
  
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl:ViewController
  ) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
	// เนื่องจากเรามีการส่งค่าจากหน้า page หลักมา เราต้องการรับค่า 
	// sorttype เริ่มต้นจากหน้าหลักมาใช้งาน ผ่านการเรียกใช้งาน navParams
    this.sorttype = this.navParams.get('sorttype');
    console.log(this.sorttype);
  }

// คำสั่งปิด popover 
  closePopover(){
  // ก่อนปิด เราก็ส่งค่า radio ที่ได้เลือก กลับไปยังหน้า page หลัก
    let para_data = {
      sorttype:this.sorttype
    }
	// จะเห็นว่าใช้รูปแบบคล้ายกับ modal
    this.viewCtrl.dismiss(para_data);
  }

}