1

I have this following two buttons that needs to be displayed on condition. I have following code, It works fine but only issue is it flickers and displays one button and disappears even when condition fails.

There is one approach to solve this, using ng-switch. How to write this in ng-switch? Could someone please help me with the code and maybe in the fiddle too.

  <button type="button" id="saveEnabled"  ng-click="ctrl.onClick()" ng-if="ctrl.Status !== 'Clicked'">Save</button>
    <button type="button" id="saveDisabled" disabled="disabled" ng-if="ctrl.Status === 'Clicked'">Saved</button>


ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };
Jasmine
  • 5,186
  • 16
  • 62
  • 114
  • Can you post a working sample? Also I don't understand your exact problem, what do you mean by 'condition fails' and displays one button and disappears? – Jason Goemaat Jul 28 '16 at 23:39
  • @JasonGoemaat: I was able to write the ng-swicth construct, but it doesn't help solving my flickering problem. – Jasmine Jul 28 '16 at 23:43
  • I can't understand your problem, when exactly is it flickering? – Jason Goemaat Jul 28 '16 at 23:44
  • @JasonGoemaat: It's very very simple if you look at the code above. What I mean by flickering is, when I click on Save button, when the dom reloads, it is supposed to show the "Saved" button and it does. However, the "Save" buttton also appears for a fraction of second and disappears which I do not want to happen (Apparently). I tried to use ng-Switch to see if that helps rather than two ng-if immediately after each other, however that is also not helping. Looks like it is not easy to solve this problem – Jasmine Jul 28 '16 at 23:49
  • Why not remove the `ng-if` and have just one button with `ng-disabled="ctrl.Status == 'Clicked'"` – logee Jul 29 '16 at 00:07
  • 4
    What you are really talking about then is page load before angular takes over. Take a look at [this question](http://stackoverflow.com/questions/12866447/prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-j). If you want to hide something until angular knows whether it should be displayed or not, you can use `ng-cloak` – Jason Goemaat Jul 29 '16 at 00:44
  • @user2341963: Thank you, but how will that look or behave? It will still be displayed? Let me try, but if you have a JSFiddle, please do let me know – Jasmine Jul 29 '16 at 00:45
  • @JasonGoemaat: Yes, all those options I was thinking, but it is not simple one or straighforward. Ng-cloack wont help but let me try. I also used debounce with 1000 and that also didn't help – Jasmine Jul 29 '16 at 00:46
  • Basically your web browser is displaying your html before angular runs, think about it as if you didn't include angular at all on your page but were using the same html. The web browser gets your html first and attempts to display it before the javascript runs. The best you can do is hide a section of your code and let angular display it when it finally gets around to bootstrapping. You can use `ng-cloak` to do this, bascially setting your page (or an area of it) to be hidden (display: none) until angular bootstraps and shows it when it can actually affect the values displayed. – Jason Goemaat Jul 29 '16 at 00:47
  • Try the answer from @ceckenrode. I think what you'll see is those angle brackets and the formula appear for a split second and flicker to say 'Save' or 'Saved' when angular bootstraps and changes the text to the result. – Jason Goemaat Jul 29 '16 at 00:49
  • @JasonGoemaat: his answer is what exactly I was after. But one small issue, I need to also have the button greyed out when it is "Saved" – Jasmine Jul 29 '16 at 01:06

1 Answers1

1

For something this simple you could use one button and a ternary operator

 <button type="button" ng-attr-id="{{ctrl.Status !== 'saveEnabled' ? 'saveEnabled' : 'saveDisabled'}}" ng-click="ctrl.Status !== 'Clicked' ? ctrl.onClick() : return">{{ctrl.Status !== 'Clicked' ? 'Save' : 'Saved'}}</button>



ctrl.onClick = function() {
      ctrl.Status = 'Clicked';
  };
ceckenrode
  • 4,543
  • 7
  • 28
  • 48
  • Thank you, this seems to be working fine, but a small issue. How to disable the button when it shows "Saved" I mean after clicking on Save, it changes texts but I also want to have this greyed out – Jasmine Jul 29 '16 at 00:59
  • Will this work? I get some error saying cannot resolve the tag....disabled="{{ctrl.Status === 'Clicked' ? 'true' : 'false'}}" – Jasmine Jul 29 '16 at 01:01
  • I used ng-disabled="{{ctrl.Status === 'Clicked' ? 'true' : 'false'}}" Its not working – Jasmine Jul 29 '16 at 01:11
  • you can use ng-disabled={{ctrl.Status === 'Clicked'}} i think you need to pass the literal true or false instead of a string – ceckenrode Jul 29 '16 at 01:12
  • worst case you can also do ng-class="{disabled: ctrl.Status === 'Clicked'}" – ceckenrode Jul 29 '16 at 01:14
  • Thank you, unfortunately both the approach suggested above is not helping. I am also doing some trial and error .... pls let me know if you know any other thing – Jasmine Jul 29 '16 at 01:19
  • hmm are you using bootstrap? or if not are you using any css frameworks? – ceckenrode Jul 29 '16 at 01:20
  • Hey, thank you so much, your syntax helped me, except for slight tweaking. Looks like we shouldn't use two angle brackets in ng-disabled as it evaluates not in current scope...read an article....This worked for me.... ng-disabled="ctrl.Status === 'Clicked'" – Jasmine Jul 29 '16 at 01:23
  • 1
    Article below and twekaed your syntax with guidance from article below.... worked like charm... thanks a lottttt :) yahooo I am happy .....http://stackoverflow.com/questions/20518691/angularjs-ng-disabled-directive-with-expression-is-not-working – Jasmine Jul 29 '16 at 01:24
  • Awesome good to know! – ceckenrode Jul 29 '16 at 01:25