在AngularJS中有條件的Ng級

Question

我有下面的彈出窗口，用戶可以對項目信息進行編碼。

我的要求是，當Foreign Currency和Conversion Rate都是有價值觀，應該乘Foreign Currency * Conversion Rate得到Amount。當Foreign Currency和Conversion Rate都爲0時，則Amount字段應該接受用戶輸入。

目前，我有下面的HTML。

<div class="form-group" show-errors> 
<label for="foreignCurrency" class="control-label col-md-3 text-muted">Foreign Currency</label> 
<div class="col-md-9"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="fa fa-dollar fa-lg"></i>&nbsp;</span> 
     <input type="number" id="foreignCurrency" name="foreignCurrency" class="form-control" placeholder="Foreign Currency" ng-model="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ForeignCurrency || 0}}" min="0" /> 
    </div> 
    <p class="help-block" ng-if="perksFrm.foreignCurrency.$error.min">The minimum foreign currency value is 0</p> 
</div> 

<div class="form-group" show-errors> 
<label for="convRate" class="control-label col-md-3 text-muted">Conversion Rate</label> 
<div class="col-md-9"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="fa fa-money"></i></span> 
     <input type="number" id="convRate" name="convRate" class="form-control" placeholder="Conversion Rate" ng-model="vm.newItem.newItemEnt.ConversionRate" ng-required="vm.newItem.newItemEnt.ForeignCurrency" value="{{vm.newItem.newItemEnt.ConversionRate || 0}}" min="0" /> 
    </div> 
    <p class="help-block" ng-if="perksFrm.convRate.$error.required">The conversion rate is required</p> 
    <p class="help-block" ng-if="perksFrm.convRate.$error.min">The minimum conversion rate is 0</p> 
</div> 

<div class="form-group" show-errors> 
<label for="amount" class="control-label col-md-3 text-muted">Amount</label> 
<div class="col-md-9"> 
    <div class="input-group"> 
     <span class="input-group-addon"><i class="fa fa-money"></i></span> 
     <input type="number" id="amount" name="amount" class="form-control" placeholder="Amount" ng-model="vm.newItem.newItemEnt.Amount" required /> 
    </div> 
    <p class="help-block" ng-if="perksFrm.amount.$error.required">The first name is required</p> 
</div> 

在Amount HTML，我能做到這樣{{vm.newItem.newItemEnt.ForeignCurrency * vm.newItem.newItemEnt.ConversionRate}}。但是，如果它們的值爲0，我的要求是接受來自Amount文本框的用戶輸入，該怎麼辦？

任何意見，以實現我的要求？

TIA

Answer 1

根據您的需求量的，我想向您提供答案。

請爲此找到代碼，也是JS小提琴演示。

HTML

<style> 
    .error{ 
     border-color:red; 
    } 
</style> 
<div ng-app="myApp" ng-controller="myCtrl"> 

    <div class="row"> 
     <div class="col-lg-2">Foreign Currency</div> 
     <div class="col-lg-2"><input type="number" ng-model="FCurrency" /></div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-2">Rate</div> 
     <div class="col-lg-2"><input type="number" ng-model="Rate" /></div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-2">Amount</div> 
     <div class="col-lg-2"><input ng-class="{error : RateAmount <= 0}" ng-disabled="isAmountDisable" 
             type="number" ng-model="RateAmount" /></div> 
    </div> 
</div> 

JS

var myApp = angular.module("myApp", []); 

myApp.controller('myCtrl', function ($scope) { 

    $scope.RateAmount = 0; 
    $scope.isAmountDisable = false; 

    function setRateAmount() { 
     if ($scope.FCurrency > 0 && $scope.Rate > 0) { 
      $scope.RateAmount = ($scope.FCurrency * $scope.Rate); 
      $scope.isAmountDisable = true; 
     } 
     else { 
      $scope.RateAmount = 0; 
      $scope.isAmountDisable = false; 
     } 
    } 
    $scope.$watch('FCurrency', function (newval, oldval) { 
     setRateAmount(); 
    }); 

    $scope.$watch('Rate', function (newval, oldval) { 
     setRateAmount(); 

    }); 


}); 

JS Fiddle Demo

Answer 2

你有沒有嘗試在foreignCurrency和convRate投入使用NG-變化。

當那些輸入更改時，您可以計算您的金額值並將其禁用。

如果它們都是0，則可以啓用它。

事情是這樣的：

function change() { 
    var foreignCurrency = vm.newItem.newItemEnt.ForeignCurrency; 
    var conversionRate = vm.newItem.newItemEnt.ConversionRate; 

if (foreignCurrency === 0 && conversionRate === 0) { 
    vm.enableAmout = true; 
} else { 
    vm.enableAmout = false; 
    vm.vm.newItem.newItemEnt.Amount = foreignCurrency * conversionRate; 
    } 
}