如何在AngularJS中通過按鈕使用ng-show和ng-hide

Question

我有兩個按鈕“開始”和“停止”，當我單擊“開始”按鈕時，我要顯示“停止”按鈕，而要隱藏“開始”按鈕，反之亦然；當我單擊“停止”按鈕時，我希望顯示“開始”按鈕，而“停止”按鈕是隱藏。一次只能顯示一個按鈕。這是我嘗試過的方法，但似乎不起作用。我在哪里出錯？

<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>

Answer 1

你可以做得更少

<button ng-click="goEvent();" ng-hide="going">Start</button>
<button ng-click="goEvent();" ng-show="going">Stop</button>

...

$scope.going = false;

$scope.goEvent = function(){
   $scope.going = !$scope.going;
   if($scope.going){  
       $scope.go();
   }else{
       $scope.stop();
   }      
}

Answer 2

您應該為兩者使用相同的變量...

<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;
}

您也可以在startevent / stopevent內部直接調用切換，而不是在ng-click上進行兩次函數調用

Answer 3

HTML：

<div ng-controller="YourController">  
<span ng-hide="EventRunning"><button ng-click="StartEvent($event)"id="btnEventStart">Start</button></span> 
<span ng-show="EventRunning"><button ng-click="StopEvent($event)" id="btnStopEvent">Stop</button></span>  
</div>

使用單個信號量隱藏和顯示EventRunning

控制器：

{ ...
     $scope.EventRunning = false;
     $scope.StartEvent = function (event) {
            event.preventDefault();
            $scope.EventRunning = true;
            // your code 
    }

    $scope.StopEvent = function (event) {
            event.preventDefault();
            $scope.EventRunning = false;
            // your code 
    } 
... }