CODEWITHSUNDEEP
javascriptangularjs
BumbleBee
BumbleBee

Reputation: 10779

change the button only after click. angularjs

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

;

Upvotes: 1

Views: 55

Answers (1)

John Smith
John Smith

Reputation: 2341

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>

Upvotes: 3

Related Questions