仅在单击后更改按钮。 angularjs

时间:2016-05-18 19:46:39

标签: javascript angularjs

这是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: ''           
            }

1 个答案:

答案 0 :(得分:3)

只需在范围中添加另一个变量,即存储点击状态。

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