javascript - 仅在单击后更改按钮。 Angular

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>