html - angularjs数学计算

Question

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

(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 本身或 Controller 内部执行此操作吗？

Answer 1

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

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

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

$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 上调用此函数。