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

上述方法被称为非常时间的性质在内部使用被改变，视图值和你的模型被更新。