Question

我创建了一个角度应用程序，它有2个无线电控件和一个文本按钮。我想在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>

会为你做的。

Answer 2

您可以创建$ watch，例如

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

使用角度根据单选按钮选项更改按钮文本

2 个答案: