ラジオボタンのオプションに基づいて、ボタンのテキストを角度を使って変更します。

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

あなたは、あなたのためにそれを行います

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