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

当这些输入发生变化时，您可以计算您的金额值并将其禁用。

如果它们都是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;
  }
}

具有AngularJS条件的Ng级

2 个答案: