CODEWITHSUNDEEP
javascriptionic-framework
Jose Miguel Ledón
Jose Miguel Ledón

Reputation: 309

handling Multiple buttons in $ionicPopup prompt

The documentation says:

Show a simple prompt popup, which has an input, OK button, and Cancel button. Resolves the promise with the value of the input if the user presses OK, and with undefined if the user presses Cancel.

I was doing:

$ionicPopup.prompt({ 
  //options 
}).then(function (userinput) {
  //get userinput and send to server
});

I need to add a third button, but can't get the text of the input, how can I resolve the promise on the onTap event of the button to get the input? 

  $ionicPopup.prompt({
   title: '¿Are you sure?',
   inputType: 'text',
   buttons: [
   { text: 'Cancel' 
     //close popup and do nothing
   },
   {
    text: 'NO',
    type: 'button-assertive',
    onTap: function(e) {  
      //send to server response NO
    }
   },
   {
    text: 'YES',
    type: 'button-energized',
    onTap: function(e) { 
      //get user input and send to server
    }
   }]

Upvotes: 3

Views: 3443

Answers (1)

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

See this demo i made with your code: http://play.ionic.io/app/ac79490c8914
prompt() is not meant to add more than two buttons,show() is used to make complex pop ups, Please see show() method in same documentation. As written in documentation, i am quoting:

Show a complex popup. This is the master show function for all popups.

A complex popup has a buttons array, with each button having a text and type field, in addition to an onTap function.

Your code will be like:

$scope.showPop = function(){
    $scope.data = {};
    var myPopup = $ionicPopup.show({
    template: '<input type="text" ng-model="data.myData">',
    title: '¿Are you sure?',
    scope: $scope,
    buttons: [
   { text: 'Cancel' 
     //close popup and do nothing
   },
   {
    text: 'NO',
    type: 'button-assertive',
    onTap: function(e) {  
      return null;
    }
   },
   {
    text: 'YES',
    type: 'button-energized',
    onTap: function(e) { 
      return $scope.data.myData;
    }
   }]
  });
  myPopup.then(function(userinput) {
    if(userinput){
      console.log('returned data'+ userinput)
    }
  });
}

Simple thing about above code is that you have bind input with $scope (<input type="text" ng-model="data.myData">) so you can access it in any manner.

Upvotes: 5

Related Questions