javascript - 使用 Angular 根据单选按钮选项更改按钮文本

Question

我创建了一个 Angular 应用程序，它有 2 个单选控件和一个文本按钮。我想在两个不同的条件下更改按钮的文本。1. 更改单选按钮会将其更改为“升级”或“保存”2. 单击文本按钮后，该按钮将被禁用，文本将更改为“正在处理”。

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

这是 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;   
  })  
};      

单选按钮切换时如何更改按钮文本？为什么当 save 函数被触发时，按钮文本不会改变？

Answer 1

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

我会为你做的。