如何使用NG-节目和NG隐藏在AngularJS按钮 [英] How to use ng-show and ng-hide with buttons in AngularJS

问题描述

我有两个按钮启动和停止，当我点击开始按钮，我想停止按钮来显示和开始按钮被反之亦然隐藏当我点击停止按钮，我想要显示的开始按钮和停止按钮是hidden.Only一个按钮必须在任何一个time.Here显示的是什么我试过，但它似乎并没有work.Where我该怎么也错了？

 ＆LT;跨度NG隐藏=Model.StartEvent ==真＆GT;
    ＆LT;按钮NG点击=Model.StartEvent（）ID =btnEventStart＆GT;开始＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;＆LT;跨度NG秀=Model.StopEvent ==假＆GT;
    ＆LT;按钮NG点击=Model.StopEvent（）ID =btnStopEvent级=工具提示＆GT;停止＆LT; /按钮＆GT;
＆LT; / SPAN＆GT;
 

解决方案

你应该使用相同的变量为...

 ＆LT;按钮NG点击=Model.toggleShow（）; Model.StartEvent（）NG秀=Model.showStartEvent＆GT;开始＆LT; /按钮＆GT;＆LT;按钮NG点击=Model.toggleShow（）; Model.StopEvent（）NG秀=！Model.showStartEvent＆GT;停止＆LT; /按钮＆GT;
Modal.toggleShow =功能（）{
  ！Model.showStartEvent = Model.showStartEvent;
}
 

你也可以切换权startevent / stopevent内部调用，而不是两个在NG-点击函数调用

I have two buttons Start and Stop,when I click the Start button I want the Stop button to show and the Start button to be hidden vice versa when I click the Stop button I want the Start button to be shown and the Stop button to be hidden.Only one button must be shown at any one time.Here is what I tried but it doesn't seem to work.Where am I going wrong?

<span ng-hide="Model.StartEvent == true">
    <button ng-click="Model.StartEvent()" id="btnEventStart">Start</button>
</span>

<span ng-show="Model.StopEvent == false">
    <button ng-click="Model.StopEvent()" id="btnStopEvent" class="tooltip">Stop</button>
</span>

解决方案

you should use same variable for both...

<button ng-click="Model.toggleShow(); Model.StartEvent()" ng-show="Model.showStartEvent">Start</button>

<button ng-click="Model.toggleShow(); Model.StopEvent()" ng-show="!Model.showStartEvent">Stop</button>


Modal.toggleShow = function(){
  Model.showStartEvent = !Model.showStartEvent;
}

also you can call toggle right inside the startevent/stopevent rather than having two function calls on ng-click

这篇关于如何使用NG-节目和NG隐藏在AngularJS按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！