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其他输入元素上调用此函数。