angularjs mathematical calculation

Question

I'm working on a loan calculator where I use ionic range sliders to select loan amount, interest rate, loan duration etc. Also there's a monthly payment range. This monthly payment range should be calculated like this when loan amount, rate and duration is changed.

(loanamount*interest rate)/loan duration

So basically monthly payment range should change when we make changes to loan amount, interest rate, and loan duration. How can I do this?

My code so far:

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

can I do this inside the HTML itself or inside the controller?

Answer 1

You can!! if you want to display in a div or span instead of an input element, you can do -

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

As you can not have expressions in ng-model, you can calculate the value in ng-change of each input element. But I wouldn't do it because I'll need to repeat the code. I would rather have a function in the controller to calculate this

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

and have a watch on the scope variables to call this function, or call this on ng-change of other input elements.

Answer 2

This is logic and should be encapsulated inside a controller, for example:

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

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

}]);

and in your HTML do the following:

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

The above method is called very time the properties that are used inside are changed and the view value and your model gets updated.