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" /> 

上述方法被稱爲非常時間的性質在內部使用被改變，視圖值和你的模型被更新。