change the button only after click. angularjs

Question

Here is the codepen. I have a text box and two button on the page. I am getting the clientId from database and putting it in sessionStorage.clientId and assigning it to the $scope.ssclientID.

The problem I am having is as soon I enter the text into the text box the "TurnOff" button shows up. I want to show the "TurnOn" till i click on it.

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

;

John Smith · Accepted Answer · 2016-05-18 19:56:25Z

3

Just add another variable to your scope, which stores the click status.

$scope.clicked = false;

In your $scope.saveEverifyOption function add

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

Finally, change the ng-ifs on your buttons:

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

answered May 18, 2016 at 19:56

John Smith

2,3414 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change the button only after click. angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related