angularjs数学计算

Question

我正在开发一个贷款计算器，我在其中使用离子范围滑块来选择贷款金额、利率、贷款期限等。还有每月付款范围。当贷款金额、利率和期限发生变化时，这个月还款范围应该这样计算。

(loanamount*interest rate)/loan duration

因此，当我们更改贷款金额、利率和贷款期限时，基本上每月还款范围应该会发生变化。我该怎么做？

到目前为止我的代码：

<content has-header="true">


    <div class="item item-divider">
     Select your Loan Amount : 
    </div>
    <div class="item range">
    <div id='slider'>
    <input type="range" name="number" min="100" max="1000000" step="100.00"  ng-model="loanAmount">
    <font color="#009ACD"><b>Loan Amount:</b></font> <input type="text" ng-model="loanAmount" min="100" max="1000000" />
    </div>
    </div>

     <div class="item item-divider">
     Select your Interest Rate: 
    </div>
    <div class="item range">
    <div id='slider'>
    <input type="range" name="volume" min="0" max="100" step="0.01"  ng-model="interestRate">
    <font color="#009ACD"><b>Interest Rate:</b></font> <input type="text" ng-model="interestRate" min="0" max="100" />
    </div>
    </div>

    <div class="item item-divider">
     Select your Loan Term : 
    </div>
    <div class="item range">
    <div id='slider'>
    <input type="range" name="volume" min="0" max="30"  ng-model="loanTerm">
    <font color="#009ACD"><b>Loan Term:</b></font> <input type="text" ng-model="loanTerm" min="0" max="30" />
    </div>
    </div>

    <div class="item item-divider">
     Your Monthly Payment : 
    </div>
    <div class="item range">
    <div id='slider'>
    <input type="range" name="volume" min="0" max="1000000"   ng-model="monthlyPayment">
    <font color="#009ACD"><b>Monthly Payment:</b></font> <input type="text" ng-model="monthlyPayment" min="0" max="1000000" />
    </div>
    </div>

    <center><button class="button button-positive" type="reset" ng-click="reset()">
     &nbsp;&nbsp;Reset&nbsp;&nbsp;&nbsp;
    </button></center>
</content>

我可以在 HTML 本身或控制器内部执行此操作吗？

Answer 1

你可以！！如果你想在 div 或 span 中显示而不是输入元素，你可以这样做 -

<div>{{ (loanAmount * interestRate) / loanDuration }}</div>

由于ng-model 中不能有表达式，您可以计算每个输入元素的ng-change 中的值。但我不会这样做，因为我需要重复代码。我宁愿在控制器中有一个函数来计算这个

$scope.calculateMonthyAmount = function() {
   $scope.monthlyPayment = Math.round(($scope.loanAmount * $scope.interestRate) / $scope.loanDuration * 100)/100; 
  // you can instead use $filter `number` for formatting
}

并监视范围变量以调用此函数，或在其他输入元素的ng-change 上调用此函数。

Answer 2

这是逻辑，应该封装在控制器内部，例如：

angular.module('myApp').controller('MyCtrl', [$scope, function($scope){

   $scope.calculateMonthlyPayment = function(){
      return ($scope.loanAmount*$scope.interestRate)/$scope.loanDuration;
   }

}]);

并在您的 HTML 中执行以下操作：

<font color="#009ACD"><b>Monthly Payment:</b></font> <input type="text" ng-model="monthlyPayment"     ng-bind="calculateMonthlyPayment ()" min="0" max="1000000" />

上面的方法在内部使用的属性被改变并且视图值和你的模型被更新的时候被调用。