<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="principle=100000;interest=14.5;tenor=10">
Principal:
<input type="number" ng-model="principle">
<br> Interest:
<input type="number" ng-model="interest">
<br> Tenor in months:
<input type="number" ng-model="tenor">
<br>
<p>
<button ng-click="calculateEMI()">CalculateEMI</button>
<button ng-click="ClearReslult()">ClearResult</button>
<button ng-click="RestoreDefault()">RestoreDefault</button>
</p>
<br>
<table>
<TR>
<TH>Month
<TH>EMI
<TH>Interest
<TH>Principal
<tr ng-repeat="contact in contacts">
<td align='right'>{{contact.O}} </td>
<td align='right'>{{contact.e}} </td>
<td align='right'>{{contact.intPerMonth}} </td>
<td align='right'>{{contact.prinPermonth }} </td>
</tr>
<TR>
<TH colspan="2">Total
<td align='right'>{{totalIntt }} </td>
<td align='right'>{{totalAmtt }}</td>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.principle = 100000;
$scope.interest = 14.5;
$scope.tenor = 10;
$scope.totalIntt = 0;
$scope.totalAmtt = 0;
$scope.contacts = [];
$scope.calculateEMI = function() {
var contactss = [];
var R = ($scope.interest / 12) / 100;
var P = $scope.principle;
var n = $scope.tenor;
var e = (P * R * (Math.pow((1 + R), n)) / ((Math.pow((1 + R), n)) - 1));
e = Math.round(e);
var totalInt = Math.round((e * n) - P);
var totalAmt = Math.round((e * n));
var intPerMonth = 0;
var prinPermonth = 0;
for (var i = 1; i <= $scope.tenor; i++) {
intPerMonth = (P * R);
P = ((P) - ((e) - (intPerMonth)));
prinPermonth = Math.round((e) - intPerMonth);
$scope.totalIntt = totalInt;
$scope.totalAmtt = totalAmt;
contactss.push({
O: i,
e: e,
intPerMonth: Math.round(intPerMonth),
prinPermonth: prinPermonth
});
}
$scope.contacts = contactss;
}
$scope.ClearReslult = function() {
$scope.principle = 0;
$scope.interest = 0;
$scope.tenor = 0;
$scope.contacts = [];
$scope.totalIntt = 0;
$scope.totalAmtt = 0;
}
$scope.RestoreDefault = function() {
$scope.principle = 100000;
$scope.interest = 14.5;
$scope.tenor = 10;
$scope.totalIntt = 0;
$scope.totalAmtt = 0;
$scope.calculateEMI();
}
});
</script>
</body>
</html>
Principal:
Interest:
Tenor in months:
| Month | EMI | Interest | Principal |
|---|---|---|---|
| 1 | 10677 | 1208 | 9469 |
| 2 | 10677 | 1094 | 9583 |
| 3 | 10677 | 978 | 9699 |
| 4 | 10677 | 861 | 9816 |
| 5 | 10677 | 742 | 9935 |
| 6 | 10677 | 622 | 10055 |
| 7 | 10677 | 501 | 10176 |
| 8 | 10677 | 378 | 10299 |
| 9 | 10677 | 253 | 10424 |
| 10 | 10677 | 127 | 10550 |
| Total | 6770 | 106770 | |
