Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is it possible to change button's text with $ionicPopup.confirm()?

I'm using $ionicPopup.confirm() but I would like to change "cancel's button" text. Is it possible to do so ?

I'm aware of .show() syntax:

  buttons: [
  { text: 'Cancel' }
  ]

But it does not seem to work with .confirm() ...

Thank 4 the help

like image 980
smknstd Avatar asked May 20 '15 13:05

smknstd


People also ask

How do I change the window confirm button text?

Change Button Label Using jQuery and CSS We have learned to change the label of the button of the confirm box by creating the custom confirm box. Also, we can use the custom libraries to style the confirm box. Now, we can set the button label in confirm box according to the confirmation message.

How do I change the text on a button in HTML?

To change the button text, first we need to access the button element inside the JavaScript by using the document. getElementById() method and add a click event handler to the button, then set it's value property to blue . Now, when we click on our button , it changes the value from Red to Blue or vice versa.


3 Answers

At least in the latest release of Ionic (1.0.0) you can do the following:

    var confirmPopup = $ionicPopup.confirm({
        title: 'Popup title',
        template: 'Popup text',
        cancelText: 'Custom cancel',
        okText: 'Custom ok'
    }).then(function(res) {
        if (res) {
            console.log('confirmed');
        }
    });

Here is the relative documentation.

like image 53
Augusto Destrero Avatar answered Sep 24 '22 02:09

Augusto Destrero


UPDATE : on ionic 1.0.0, this is now possible, check here

showConfirm Options :

{
  title: '', // String. The title of the popup.
  cssClass: '', // String, The custom CSS class name
  subTitle: '', // String (optional). The sub-title of the popup.
  template: '', // String (optional). The html template to place in the popup body.
  templateUrl: '', // String (optional). The URL of an html template to place in the popup   body.
  cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
  cancelType: '', // String (default: 'button-default'). The type of the Cancel button.
  okText: '', // String (default: 'OK'). The text of the OK button.
  okType: '', // String (default: 'button-positive'). The type of the OK button.
}

Yes you can do wathever you want, using ionic popup.show and bind the Cancel event.

$ionicPopup.show({
   template: msg,
   title: titleConfirm,
   buttons: [
     { text: "BTN_NO",
       onTap:function(e){
            return false;
       }
     },
     { text: "BTN_OK",
       onTap:function(e){
            return true;
       }
     },
   ]
});

After investigation on the ionic popover.confirm function this is not possible to customize it. The value of popover.confirm are hardcoded line 446

function showConfirm(opts) {
    return showPopup(extend({
      buttons: [{
        text: opts.cancelText || 'Cancel',
        type: opts.cancelType || 'button-default',
        onTap: function() { return false; }
      }, {
        text: opts.okText || 'OK',
        type: opts.okType || 'button-positive',
        onTap: function() { return true; }
      }]
    }, opts || {}));
  }
like image 43
aorfevre Avatar answered Sep 28 '22 02:09

aorfevre


It's possible to do, you have to use the "type" thing inside the button

buttons: [
            { text: 'Cancel' },
            {
                text: '<b>Save</b>',
                type: 'button-assertive',
                onTap: function(e) {
                    $scope.request_form.abc = "accepted";
                }
            }
        ]

in the type part you have to give the class name , and you can change the color of the button.

like image 3
Anshul Kalra Avatar answered Sep 26 '22 02:09

Anshul Kalra