html - How to use ng-show and ng-hide with buttons in AngularJS -
I have two buttons start and stop, when I click on the Start button, I can show the stop button and When I click on the Stop button, I should hide hidden, I want to show the start button and hide the stop button. Only one button should be shown at any one time. What I have tried here, but it does not seem to work. Where am I going?
& lt; Span ng-hide = "Model.StartEvent == true" & gt; & Lt; Button ng-click = "Model.StartEvent ()" id = "btnEventStart" & gt; Start & lt; / Button & gt; & Lt; / Span & gt; & Lt; Span ng-show = "Model.StopEvent == false" & gt; & Lt; Button ng-click = "Model.StopEvent ()" id = "btnStopEvent" class = "tooltip" & gt; Stop & lt; / Button & gt; & Lt; / Span & gt;
You should use the same variable for both ...
& lt; Button ng-click = "Model.toggleShow (); Model.StartEvent ()" ng-show = "Model.showStartEvent" & gt; Start & lt; / Button & gt; & Lt; Button ng-click = "Model.toggleShow (); Model.StopEvent ()" ng-show = "! Model.showStartEvent" & gt; Stop & lt; / Button & gt; Modal.toggleShow = function () {Model.showStartEvent =! Model.showStartEvent; }
You can call the toggle inside the beginners / stapents instead of calling two functions on ng-click
Comments
Post a Comment