ionic上拉菜单解析

Action Sheet

<script>
    angular.module('starter',['ionic'])
            .run(function ($ionicPlatform) {
                $ionicPlatform.ready(function () {
                    if(window.cordova && window.cordova.plugins.Keyboard){
                        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                    }
                    if(window.StartusBar){
                        StatusBar.styleDefault();
                    }
                });
            })
            .controller('actionsheetCtl',['$scope','$ionicActionSheet','$timeout',function ($scope,$ionicActionSheet,$timeout) {
                $scope.show=function () {
                    var hideSheet=$ionicActionSheet.show({
                        buttons:[
                            {text:'<b>Share</b> This'},
                            {text:'Move'}
                        ],
                        destructiveText:'Delete',  //destructive破坏性的        样式:文字颜色为红色
                        titleText:'Modify your album',      ///将会位于上拉菜单的头部位置
                        cancelText:'Cancel',//位于上拉菜单的尾部，且与主体之间存在间隙
                        cancel:function () {
                            //add cancel code
                            //这里是上拉菜单收回会将要执行的代码
                        },
                        buttonClicked:function (index) {
                            alert('你点击了第'+index+'个按钮')
                            //index下标从0开始
                            //这里的代码是点击button后将要执行的代码，button为上面定义的数组
                            return true;
                        }
                    });
                    $timeout(function () {
                        alert('再见')
                        //这里为设置的显示时长
                        hideSheet();
                    },2000);
                };

            }])

</script>

转载
链接：http://www.imooc.com/article/15903?block_id=tuijian_wz

---

自己写的性别选择：
angular.module(‘account.controller’, [‘account.service’])

   .controller('accountController', function ($scope, accountService,$ionicActionSheet) {
     //  上拉菜单选性别 
     $scope.showSheet=function(){
        //创建上拉菜单实例
        //hideSheet在调用此对象即为关闭上拉菜单
        var hideSheet = $ionicActionSheet.show({
            buttons: [
            { text: '男' },
            { text: '女' },
            { text: '保密' }
            ],
            destructiveText: '删除',   // 危险按钮的文本
            titleText: '修改性别',            // 上拉菜单的标题
            cancelText: '取消',
            cancel: function() {
            console.log("点击了取消按钮")
            },
            destructiveButtonClicked: function(){
            console.log("点击了删除按钮")
            //  关闭上拉菜单
            hideSheet()
            },
            buttonClicked: function(index) {
            //自定义按钮组的监听
             switch (index) {  
                    case 0: 
                      $scope.sex='男' 
                        break;  
                    case 1:  
                      $scope.sex='女'  
                        break;  
                    case 2:  
                      $scope.sex='保密' 
                        break;  
                    default:  
                        break;  
                }  
               
            return true;
            }
        });     
    }

HTML：

<div class="item item-input">
                        <label>性别</label>
                        <input id='sex' type="text" ng-click="showSheet()" ng-model="sex">
                    </div>