AngularJSの条件付きNgクラス

Question

私は、ユーザーがアイテム情報をエンコードできる以下のポップアップを持っています。

私の要件は、Foreign CurrencyとConversion Rateは、両方の値を持っているとき、それはAmountを得るためにForeign Currency * Conversion Rateを掛けなければならない、ということです。 Foreign CurrencyとConversion Rateの両方が0の場合、Amountフィールドはユーザー入力を受け入れる必要があります。

現在、以下のHTMLがあります。 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> 

、私はこの{{vm.newItem.newItemEnt.ForeignCurrency * vm.newItem.newItemEnt.ConversionRate}}のようにそれを行うことができます。しかし、もし彼らが0の値を持っていて、私の要求がAmountテキストボックスからのユーザ入力を受け入れるなら、どうでしょうか？

私の要件を達成するためのアドバイスはありますか？ TIA

Answer 1

あなたのrequirmentによると、私はあなたの答えを提供しようとしました。

このコードは、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; 
    } 
}