1

I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?

Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg 

 buttons: [{
            text: 'Cancel'
        }, {
            text: '<b ng-disabled="user.length<1">Delete</b>',
            type: 'button-crimson'
    }]

But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.

Camilo Terevinto
  • 31,141
  • 6
  • 88
  • 120
zi88
  • 327
  • 5
  • 8
  • 2
    can you post what you currently have? – PrinceG Jan 08 '16 at 03:48
  • and what is "after something happens..?" what action like..?! – the_mahasagar Jan 08 '16 at 04:35
  • Hi PriceG, the_mahasagar. I am implementing code from here: https://github.com/lkatney/ProfileImageUpload-AngularJS . The plugin module opens popup and then asks the user to select a file using a hidden tag. A chosen file is then drawn directly into the opened popup pane. After the image draw is done (onLoadDone call) I would like to show the popup buttons with specific action options. These buttons, and these actions should not be available or visible before the drawing is complete. – zi88 Jan 08 '16 at 10:39
  • appologies for the typo PrinceG – zi88 Jan 08 '16 at 18:39

3 Answers3

1

If you're still looking for an answer to this...

I created a variable for my buttons array

var buttons = [{...}, {...}]

Then would assign that to the object in the popup

$ionicPopup.show({
    templateUrl: 'templates/pop-up.html',
    title: 'My Popup',
    subTitle: 'stuff,
    scope: $scope,
    **buttons: buttons,**

And then would alter that array

buttons.splice(0, 1, {/*new button*/})

I haven't tested it but it might also work if you wanted to edit a title or class

buttons[0].type = 'newCssClass';
814k31
  • 55
  • 8
  • BTW I ended up with another solution which you or others may find useful: I eliminated the buttons section from the popup (or modal) altogether, which causes ionic not to display "its" buttons or use its buttons' logic. Instead I put a flex-box in the modal's popup-body with direction "column", and created my own "buttons" with my own logic as the bottom element of that "popup-body" . Now these buttons are controlled by my code and I can do everything with them - hide, disable, change text, special effects etc, all within the code that controls the modal's logic. No limitations whatsoever. – zi88 Feb 26 '18 at 12:23
0

My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.

eg:

addPopup = $ionicPopup.show({
        templateUrl: 'templates/pop-up.html',
        title: 'My Popup',
        subTitle: 'stuff,
        scope: $scope,
        buttons: [{
                text: 'Cancel',

And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.

Eric
  • 573
  • 1
  • 5
  • 11
-1

It should be easy using $scope variables and ng-hide/ng-show

function something_happens(){
  $scope.it_happened = true;
}

<button ng-show="it_happened">Qlik Me</button>

The button will only display if $scope.it_happened == true

errata
  • 23,596
  • 2
  • 22
  • 32
  • 2
    thanks much errata but that is not what I asked about. Your answer is for binding regular html buttons (or elements) to angular. Ionic Popup buttons are different, they are defined in JS code in the buttons array as part of the popup object, see http://ionicframework.com/docs/api/service/$ionicPopup/ . Each element in the buttons array is an object with text, type (which is a class ) and an onTap function. What we need is a way to bind them to the rest of the JS/Angular code, do ng-hide or ng-show (or to otherwise change their style) AFTER the popup object was launched by popup.show(). – zi88 Jan 09 '16 at 02:19
  • The answer does not reflect on the actual query, rathe mentions the totally different concept, as also mentioned by the comment above. – user1242321 Jun 17 '17 at 04:37