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
    • 474
    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 = ${
             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 $ and show action sheet. you can add the functionality of edit buttons inside buttonClicked and for delete button destructiveButtonClicked can be used.

    $ 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

Sign up using

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: