แสดงเมนูตัวเลือก Action Sheet ใน app ionic material

cordova plugin add cordova-plugin-x-socialsharing

cordova plugin add cordova-plugin-themeablebrowser

C:\phonegap\learn004>cordova plugin add cordova-plugin-actionsheet

<ion-view view-title="Profile">
    <ion-content ng-class="{expanded:$scope.isExpanded}">
        <div class="hero slide-up" style="background-image: url('img/profile-bg.jpg');">
            <div class="content">
                <div id="avatar_img" class="avatar" ng-click="changeprofile()"
                     style="background-image: url('img/daenerys.jpg');"
                ></div>
                <h3><a class="light">{{member_user}}</a></h3>
                <h4>{{member_phone}}</h4>
            </div>
        </div>
    </ion-content>
</ion-view>

<div id="avatar_img" class="avatar" ng-click="changeprofile()"
     style="background-image: url('img/daenerys.jpg');"
></div>

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet) {

    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.isExpanded = false;
    $scope.$parent.setExpanded(false);
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();


    // กำหนดตัวแปรสำหรับค่าเริ่มต้นของข้อมูลหน้าโพรไลฟ์
    $scope.member_user = '';
    $scope.member_phone = '';

    // กำหนดให้แสดงเมนูสมาชิก
    $scope.$parent.setMemberMenu(true);

    // สร้างฟังก์ชั่นสำหรับเรียกใช้ Toast plugin
    $scope.showToast = function(str, duration, position){
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            return $cordovaToast
                .show(str, duration, position)
                .then(function(success) {
                    // success
                }, function (error) {
                    // error
                });
        });
    };

    var db = null;

    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
        // ตรวจสอบและทำการเชื่อมต่อกับ db
        db = window.sqlitePlugin.openDatabase({
            name: 'my.db', location: 'default'
        }, function (db) {
            // เชื่อมต่อ db สำเร็จ
            $scope.showToast('Open DB Success','long','bottom');

            // แสดง spin dialog plugin จะใช้หรือไม่ก็ได้ นำมาใช้เผื่อใครไปประยุกต์เพิ่ม
            $cordovaSpinnerDialog.show(null,"รอสักครู่..กำลังโหลดข้อมูล"); // แสดง loading
            $timeout(function() { // ซ่อนอัตโนมัติใน 300 มิลลิวินาที
                $cordovaSpinnerDialog.hide();
            }, 300);

            // เริ่มทำงานของคำสั่ง db
            db.transaction(function (tx) {
                // เตรียมคำสั่ง sql ดึงข้อมูลสมาชิกอิงจาก member_id ที่เราเก็บไว้ใน $scope หลัก
                var query = "SELECT member_user, member_phone" +
                    " FROM member WHERE member_id = ?";
                // ดึงค่า member_id จาก $scope หลักด้วยฟังก์ชั่น getMemberID()
                var id_member = $scope.$parent.getMemberID();

                // ทำคำสั่ง sql ดึงข้อมูลตาม member_id
                tx.executeSql(query, [id_member], function (tx, resultSet) {
                        // ถ้าพบข้อมูล
                        if(resultSet.rows.length){
                            // นำข้อมูลที่ได้ มาไว้ในตัวแปร member_user และ member_phone
                            // เพื่อแสดงในหน้า profile
                            $scope.member_user = resultSet.rows.item(0).member_user;
                            $scope.member_phone = resultSet.rows.item(0).member_phone;
                        }
                        $cordovaSpinnerDialog.hide();
                    },
                    function (tx, error) {
                        $scope.showToast('SELECT error: ' + error.message,'long','bottom');
                    });
            }, function (error) {
                $scope.showToast('transaction error: ' + error.message,'long','bottom');
            }, function () {
                $scope.showToast('transaction ok','long','bottom');
            });
        }, function (error) {
            $scope.showToast('Open database ERROR: ' + JSON.stringify(error),'long','bottom');
        });
    });

    // กำหนด options การตั้งค่าการแสดงเมนูตัวเลือกใน action sheet
    var options = {
        title: 'เปลี่ยนรูปโพรไฟล์?',
        buttonLabels: ['ถ่ายรูป', 'เลือกจากอัลบั้ม'],
        addCancelButtonWithLabel: 'ยกเลิก',
        androidEnableCancelButton : true,
        winphoneEnableCancelButton : true
    };

    // สร้างฟังก์ชั่นสำหรับแสดง action sheet ที่เราเรียกใช้ในไฟล์ profile.html
    $scope.changeprofile = function(){

        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกให้ action sheet แสดง
            $cordovaActionSheet.show(options)
                .then(function(btnIndex) {
                    // เมื่อแสดงแล้ว และเลือกเมนู หรือยกเลิก คืนค่า key
                    var index = btnIndex;
                    alert(index);// ทดสอบแสดงค่า key
                });
        });

    };



    $timeout(function() {
        ionicMaterialMotion.slideUp({
            selector: '.slide-up'
        });
    }, 300);

    $timeout(function() {
        ionicMaterialMotion.fadeSlideInRight({
            startVelocity: 3000
        });
    }, 700);

    ionicMaterialInk.displayEffect();
})

.controller('ProfileCtrl', function(
    $scope, $stateParams, $timeout,
    ionicMaterialMotion, ionicMaterialInk, $ionicPlatform,
    $cordovaSpinnerDialog, $cordovaToast, $cordovaActionSheet) {

    // กำหนด options การตั้งค่าการแสดงเมนูตัวเลือกใน action sheet
    var options = {
        title: 'เปลี่ยนรูปโพรไฟล์?',
        buttonLabels: ['ถ่ายรูป', 'เลือกจากอัลบั้ม'],
        addCancelButtonWithLabel: 'ยกเลิก',
        androidEnableCancelButton : true,
        winphoneEnableCancelButton : true
    };

    // สร้างฟังก์ชั่นสำหรับแสดง action sheet ที่เราเรียกใช้ในไฟล์ profile.html
    $scope.changeprofile = function(){

        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกให้ action sheet แสดง 
            $cordovaActionSheet.show(options)
                .then(function(btnIndex) {
                    // เมื่อแสดงแล้ว และเลือกเมนู หรือยกเลิก คืนค่า key
                    var index = btnIndex;
                    alert(index);// ทดสอบแสดงค่า key
                });
        });

    };

C:\phonegap\learn004>phonegap build android