Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Ionic - Javascript Action Sheet

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 489
    Comment on it

    Ionic provides a service named Action Sheet. It will add slide up pane on the bottom of the screen that contains different options.

    Using Action Sheet:

    If you want to use ionic sheet into your application, then in your controller you have to inject $ionicActionSheet service as a dependency. next, you have to create $scope.showActionSheet() function in your js file and then you will create a button in your HTML template that will call the function that you have created.

    Controller Code:

    .controller(appCtrl', function($scope, $ionicActionSheet) {
    
       $scope.triggerActionSheet = function() {
    
          // Show the action sheet
          var showActionSheet = $ionicActionSheet.show({
             buttons: [
                { text: 'Edit 1' },
                { text: 'Edit 2' }
             ],
                
             destructiveText: 'Delete',
             titleText: 'Action Sheet',
             cancelText: 'Cancel',
                
             cancel: function() {
                // add cancel code...
             },
                
             buttonClicked: function(index) {
                if(index === 0) {
                   // add edit 1 code
                }
                    
                if(index === 1) {
                   // add edit 2 code
                }
             },
                
             destructiveButtonClicked: function() {
                // add delete code..
             }
          });
       };
    })

    HTML Code:

    <button class = "button">Action Sheet Button</button>

    When you click on the Action Sheet Button, it will call the function $ionicActionSheet.show and show action sheet. you can add the functionality of edit buttons inside buttonClicked and for delete button destructiveButtonClicked can be used.

    $ionicActionSheet.show() method has different parameters:

    buttons: It creates button object with some text field inside.
    titleText: It shows the title of action sheet.
    cancelText: It is the text for cancel button.
    destructiveText: It is text for delete button.
    cancel: It is function that is called for cancel button, backdrop or back button.
    buttonClicked: It is function called when one of edit buttons is pressed. Index keeps track of which button is tapped. Return true will close the action sheet.
    destructiveButtonClicked: It is function called when delete button is pressed. Return true will close the action sheet.
    cancelOnStateChange: It is boolean value by default is true. If it is true (default) it will cancel the action sheet when navigating.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: