การใช้งาน ionicpopup ใน ionicframework ตอนที่ 12

<ion-header-bar class="bar bar-header bar-assertive">  
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>  
<h1 class="title">My Ionic</h1>  
</ion-header-bar>  
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->  
<ion-content  class="scroll-content ionic-scroll  has-header">  

  
<div class="list card">

  <div class="item item-body">
   <h2>Welcome</h2>
    <p>
    This is welcome.html template
      <br>
      <br>
      <br>

    <div class="button-bar">
    <a ng-click="showAlert()" class="button button-assertive">Alert</a>    
    <a ng-click="showConfirm()" class="button button-positive">Confirm</a>
    <a ng-click="showPrompt()" class="button button-balanced">Prompt</a>    
    </div>      
   <br><br>
    <div class="button-bar">
    <a ng-click="showPopup()" class="button button-royal">MyPopup</a>    
    </div>      
    </p>
  </div>

</div>            
    
</ion-content>   

angular.module("myIonicApp", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('intro', {  // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
        url: '/',  // ถ้าลิ้งไปที่ url / 
        templateUrl: 'tpl/welcome.html',  // ให้ไปเรียกไฟล์ welcome.html มาแสดง
        controller: 'welcomeCtrl'  // พร้อมสร้าง controller ชื่อ myIonicHome
    })
     .state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
        url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
        controller: 'aboutusCtrl'
    })   
     .state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
        url: '/contactus',
        templateUrl: 'tpl/contactus.html',
        controller: 'contactusCtrl'
    })          
    $urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ  / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ   มีการส่งค่า $ionicPopup เพื่อใช้งาน popup
.controller("welcomeCtrl",function($scope,$ionicPopup){ 


    // การสร้างฟังก์ชั่น เรียกใช้งาน popup รูปแบบ alert
    $scope.showAlert = function() {
        // สร้าง popup object รุปแบบ alert
        // เราสามารถ กำหนดไว้ในตัวแปรได้ เช่น 
//        var alertobj=$ionicPopup.alert({
//            title: 'คำแนะนำ',  // หัวข้อหลัก
//            template: 'คุณเห็นข้อความนี้แล้ว'  // template หรือข้อความที่ต้องการแสดง
//        });
        $ionicPopup.alert({
            title: 'คำแนะนำ',  // หัวข้อหลัก
            template: 'คุณเห็นข้อความนี้แล้ว'  // template หรือข้อความที่ต้องการแสดง
        }).then(function(res) { // เมื่อปิด popup 
            // คำสั่งให้ทำงาน เมื่อปิด alert โดยการคลิกปุ่ม ok
            console.log('ปิด alert แล้ว');
        });
    };      
    
    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup ในรูปแบบ confirm
    $scope.showConfirm = function() {
        // สร้าง popup object รุปแบบ confirm        
        $ionicPopup.confirm({
            title: 'ยืนยันการลบ', // หัวข้อหลัก
            template: 'คุณต้องการลบรายการนี้หรือใม่?'   // template หรือข้อความที่ต้องการแสดง
        }).then(function(res) { // เมื่อปิด popup กรณีเลือก ok หรือ cancel
            // เงือนไขการทำงาน
            if(res){  // ถ้าเลือก ok
                // ทำงานตามคำสั่งที่กำหนด
                console.log('คุณเลือก ok');
            }else{  // ถ้าเลือก cancel
                // ทำงานตามคำสั่งที่กำหนด
                console.log('คุณเลือก cancel');
            }
        });
    };    
    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup ในรูปแบบ prompt    
    $scope.showPrompt = function(){
        // สร้าง popup object รุปแบบ prompt     
        $ionicPopup.prompt({
            title: 'ยืนยันรหัสผ่าน',  // หัวข้อหลัก
            subTitle:'กรุณายืนยันรหัสผ่านอีกครั้ง',  // หัวข้อย่อย
            inputType: 'password',  // รูปแบบ รnput รับค่า เป็น text หรือ pasword
            inputPlaceholder: 'กรอกรหัสผ่าน'  // ข้อความแสดงใน input
        }).then(function(res) { // เมื่อปิด popup โดยคลิก ok หรือ cancel 
            // ทำงานตามคำสั่งที่กำหนด  เมือปิด popup
            // ถ้า เลือก ok ค่า res จะคือ ค่า input ที่กรอก สามารถเอาไปใช้งานต่อได้
            console.log('รหัสผ่านของคุณคือ ', res);  
        });        
    };

    
    // การสร้างฟังก์ชั่น เรียกใช้งาน popup แบบกำหนดเอง หรือ ในรูปแบบ show    
    $scope.showPopup = function() {
        // กำหนดตัวแปร object เพื่อไว้รับค่า
        $scope.data = {};

        // กำหนดรูปแบบ การแสดง popup ในตัวอย่างเราจะแสดงให้กรอกข้อมูลสำหรับล็อกอิน
        var str_template='<input type="text" placeholder="ชื่อผู้ใช้" ng-model="data.username"><br>';
        str_template+='<input type="password" placeholder="รหัสผ่าน" ng-model="data.password">';
        
         // สร้าง popup object รุปแบบ show    
        $ionicPopup.show({
            template:str_template, // ใช้รูปแบบตามตัวแปรด้านบน
            title: 'เข้าสู่ระบบ',  // หัวข้อหลัก
            subTitle: 'กรุณากรอกข้อมูลเพื่อเข้าสู่ระบบ',  // หัวข้อย่อย
            scope: $scope, // กำหนด scope child เพื่อใช้งานข้อมูลใน popup
            buttons: [ // จัดรูปแบบปุ่ม
                { // กำหนดรูปแบบสำหรับปุ่ม cancel
                    text: 'ยกเลิก',   // ข้อความปุ่ม 
                    type: 'button-assertive' // รูปแบบ css class ของปุ่ม
                },
                {    // กำหนดรูปแบบสำหรับปุ่ม ok
                    text: '<b>เข้าสู่ระบบ</b>',  // ข้อความปุ่ม 
                    type: 'button-balanced',   // รูปแบบ css class ของปุ่ม
                    onTap: function(e) { // กำหนดการทำงานเพิ่มเตืม ถ้ากด ok
                        // ตรวจสอบว่าได้กรอกข้อมูล username และ password หรือไม่
                        if (!$scope.data.username || !$scope.data.password) {
                            // ถ้าไม่ได้กรอก จะไม่สามารถทำอะไรได้ กดแล้วไม่มีผล
                            // และ popup จะยังไม่ปิด
                            e.preventDefault();
                        } else {
                            // หากกรอกข้อมูลครบ ส่งค่ากลับเป็น ตัวแปร object
                            return $scope.data;
                        }
                }
                },
            ]
        }).then(function(res) { // เมื่อปิด popup โดยการกด ok หรือ cancel
            // ส่งค่ากลับมาเป็น object ชื่อว่า res  กรณีมีข้อมูล และกดปุ่ม ok
            // กรณีกดปุ่มยกเลิก จะไม่มี ค่า res หรือเป็น undefined
            if(res){ // ถ้ามีค่า res
                $scope.data=res;  // นำค่าที่ได้ไปเก็บในตัวแปร object ของ scope
                console.log('ชื่อผู้ใช้!',$scope.data.username);  // การเรียกใช้งานข้อมูล ชื่อผู้ใช้ได้จาก  $scope.data.username
                console.log('รหัสผ่าน!', $scope.data.password); // การเรียกใช้งานข้อมูล รหัสผ่านได้จาก  $scope.data.password
            }
        });    
    };
        
        
})
.controller("aboutusCtrl",function($scope){ 
                 
})
.controller("contactusCtrl",function($scope,$ionicPopup){ 

})
.controller("myIonicHome",function($scope){ 

});

    {
        title: '', // หัวข้อหลัก
        subTitle: '', // หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        scope: null, // กำหนด scope child เพื่อใช้งานข้อมูลใน popup ใช้ null หรือ $scope (มีหรือไม่ก็ได้)
        buttons: [  // จัดรูปแบบปุ่ม
            { // กำหนดรูปแบบสำหรับปุ่ม cancel
                text: 'Cancel',  // ข้อความปุ่ม
                type: 'button-default',  // รูปแบบ css class ของปุ่ม
                onTap: function(e) {  // กำหนดการทำงานเพิ่มเตืม ถ้ากดปุ่ม
                    // การใช้งาน e.preventDefault() จะทำให้การกดปุ่มใดๆ ไม่มีผล และ popup จะไม่ปิด 
                    //    e.preventDefault();
                }
            },{    // กำหนดรูปแบบสำหรับปุ่ม ok{  
                text: 'OK',   // ข้อความปุ่ม
                type: 'button-positive',  // รูปแบบ css class ของปุ่ม
                onTap: function(e) {  // กำหนดการทำงานเพิ่มเตืม ถ้ากดปุ่ม
                    // คืนค่าข้อมูลกลับ กรณีมีการใช้งาน input text หรือมีการใช้งาน ข้อมูลผ่านการกำหนด $scope
                    return scope.data.response;
                }
            }
        ]
    }

    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        okText: '', // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: '', // รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }        

    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        cancelText: '', // ข้อความปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'Cancel')
        cancelType: '', // รูปแบบ css class ของปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-default')
        okText: '', // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: '', // รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }   

    {
        title: '', // หัวข้อหลัก
        subTitle: '', //  หัวข้อย่อย (มีหรือไม่ก็ได้)
        template: '', // ข้อความที่แสดงใน popup (มีหรือไม่ก็ได้)
        templateUrl: '', // url ไฟล์ ข้อความที่แสดงใน popup  (มีหรือไม่ก็ได้)
        inputType: // รูปแบบ input สำหรับรับข้อมูล เช่น text หรือ password (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'text')
        inputPlaceholder: // ข้อความที่แสดงแนะนำใน input (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: '')
        cancelText: // ข้อความปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'Cancel')
        cancelType: // รูปแบบ css class ของปุ่ม cancel (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-default')
        okText: // ข้อความปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'OK')
        okType: //  รูปแบบ css class ของปุ่ม Ok (ค่าเริ่มต้น หากไม่กำหนดจะเป็น: 'button-positive')
    }