僅在單擊后更改按鈕。 angularjs

Question

這是codepen 。 我在頁面上有一個文本框和兩個按鈕。 我從數據庫獲取clientId並將其放入sessionStorage.clientId並將其分配給$ scope.ssclientID。

我遇到的問題是，只要我在文本框中輸入文本，“TurnOff”按鈕就會顯示出來。 我要顯示“TurnOn”直到我點擊它。

HTML：

 <div class="row" >
     <div class="col-xs-12 form-group">
       <label class="control-label col-xs-2">Client ID</label>
           <div class="col-xs-7">
           <input type="text" name="clientID" class="form-control input-md" ng-model="ssclientID" />
            </div>
        <button ng-if="ssclientID != 'null' && ssclientID != '0' && ssclientID != ''" type="button"  class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(0)">
      <i  class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify                                          
              </button> 
          <button ng-if="ssclientID == '0' || ssclientID == 'null' || ssclientID == ''" type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
       <i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
       </button>                                          
  </div>

js：

//$scope.ssclientID = sessionStorage.clientId;
     $scope.Model = {
                compId: 0,             
                clientID: ''           
            }

;

Answer 1

只需在范圍中添加另一個變量，即存儲點擊狀態。

$scope.clicked = false;

在你的$scope.saveEverifyOption函數中添加

if (clientID == 0) $scope.clicked = false;
else $scope.clicked = true;

最后，更改按鈕上的ng-if ：

<button ng-if="ssclientID != 'null' && ssclientID != '0' && ssclientID != '' && clicked" type="button"  class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(0)">
    <i  class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify                                          
</button> 
<button ng-if="ssclientID == '0' || ssclientID == 'null' || ssclientID == '' || !clicked" type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
    <i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
</button>