CODEWITHSUNDEEP
javascripthtmlangularjs
Gloria Santin
Gloria Santin

Reputation: 2136

Change button text based on radio button option using angular

I created an angular application that has a 2 radio controls and a text button. I would like to change the text of the button under 2 separate conditions. 1. Changing the radio button will change it to either 'Upgrade' or 'Save' 2. When the text button is clicked the button is disabled and text changed to 'Processing'.

This is the html:

<div class="row" style="margin-top: 5px; margin-bottom: 5px;">
    <input type="radio" ng-model="outputType" value="Database">
    <label>Database</label>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
    <input type="radio" ng-model="outputType" value="File">
    <label>Xml File</label>
</div>   
<div>
    <button id="upgradeDBButton" type="button" ng-click="UpgradeDatabase()" 
    ng-disabled="upgradeBtndisabled" class="btn btn-info" 
    style="float: right; margin-right: 5px;">{{upgradeBtnText}}</button>
</div>

This is the javascript

angular.module('vow-administration-ui')
  .controller('UpgradeCtrl', ['$scope',  '$modal', 'UpgradeDB', 'CreateXmlFile', 'TestConnection',
      function($scope, $modal, upgradeDB, createXmlFile, testConnection) { 

        $scope.title = 'Upgrade Database';
        $scope.upgradeBtnText = 'Upgrade Database';
        $scope.upgradeBtndisabled = false;
};      

$scope.UpgradeDatabase = function(){  
  var currentBtnText = $scope.upgradeBtnText;
  $scope.upgradeBtnText = 'Processing...';  
   $scope.upgradeBtndisabled = true;  
  upgradeDB.save({  ...
   }).$promise.then(function() {
     $scope.upgradeBtndisabled = false;  
      $scope.upgradeBtnText = currentBtnText;         
  }, function(error){
        ...
   $scope.openMessageModal($scope.messageModalVariables);  
    $scope.upgradeBtndisabled = false;  
    $scope.upgradeBtnText = currentBtnText;   
  })  
};

How do I change the button text when the radio buttons are toggled? Why does by button text not change when the save function is fired?

Upvotes: 0

Views: 1607

Answers (2)

Sergey Moiseev
Sergey Moiseev

Reputation: 2963

<div class="row" style="margin-top: 5px; margin-bottom: 5px;">
    <input type="radio" ng-model="outputType" value="Database">
    <label>Database</label>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 10px;">
    <input type="radio" ng-model="outputType" value="File">
    <label>Xml File</label>
</div>   
<div>
    <button id="upgradeDBButton" type="button" ng-click="UpgradeDatabase()" 
    ng-disabled="upgradeBtndisabled" class="btn btn-info" 
    style="float: right; margin-right: 5px;">{{ upgradeBtndisabled ? 'Processing' : ((outputType == 'Database') ? 'Upgrade' : 'File') }}
   </button>
</div>

Will do it for you.

Upvotes: 2

Dmytro Rudnitskikh
Dmytro Rudnitskikh

Reputation: 111

You can create $watch, something like

$scope.$watch('outputType', function(newVal){
   $scope.upgradeBtnText = newVal === 'Database' ? 'Upgrade' : 'Save';
}

Upvotes: 0

Related Questions