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

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -