Menu
I need a Sum of Balance from the Following Data in HTML not in JS Controller Function. So, I used the ng-init within the ng-repeat. But I can't able to get the result.
My JSON Data is
{
"records":[
{
"ldat":"2014-08-13",
"eid":"HSL018",
"dr":"55420",
"cr":"0",
"bal":"55420"
},
{
"ldat":"2014-10-11",
"eid":"HBL056",
"dr":"0",
"cr":"35000",
"bal":"20420"
},
{
"ldat":"2014-10-26",
"eid":"HBL001",
"dr":"0",
"cr":"420",
"bal":"20000"
},
{
"ldat":"2015-11-01",
"eid":"HDL001",
"dr":"0",
"cr":"20000",
"bal":"0"
}
]
}
My HTML is
<h3>Net Balance {{ legTot }}</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<td class="text-center">#</td>
<td class="text-center">Last Trans</td>
<td class="text-center">Dr</td>
<td class="text-center">Cr</td>
<td class="text-center">Balance</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data | orderBy:'eid' | orderBy:orderByField:reverseSort">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.ldat }}</td>
<td class="text-right">{{ x.dr | currency:"₹" }}</td>
<td class="text-right">{{ x.cr | currency:"₹" }}</td>
<td class="text-right" ng-init="legTot = legTot + x.bal | number">{{ x.bal | currency:"₹" }}</td>
</tr>
</tbody>
</table>
Here I used the ng-init="legTot = legTot + x.bal | number" to sum the balance legTot is a Scope Variable.
I Can't able to get the total. Kindly assist me how to achieve this without foreach loop in AngularJS Controller Function.
573
ng-init creates new child scope. To inherit scope variables from parent to child, you should put those variable to an object. In your scope in controller, create object with name 'vm' and put your 'legTot' variable inside it.
$scope.vm = {legTot: 0}
And change html
<h3>Net Balance {{ vm.legTot }}</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<td class="text-center">#</td>
<td class="text-center">Last Trans</td>
<td class="text-center">Dr</td>
<td class="text-center">Cr</td>
<td class="text-center">Balance</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data | orderBy:'eid' | orderBy:orderByField:reverseSort">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.ldat }}</td>
<td class="text-right">{{ x.dr | currency:"₹" }}</td>
<td class="text-right">{{ x.cr | currency:"₹" }}</td>
<td class="text-right" ng-init="vm.legTot = vm.legTot + Number(x.bal)">{{ x.bal | currency:"₹" }}</td>
</tr>
</tbody>
</table>
answered Feb 21 '26 01:02
Solution without forEach loop jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.legTot = 0;
$scope.addBal = function(bal){
$scope.legTot+=bal;
}
$scope.data = [{
"ldat": "2014-08-13",
"eid": "HSL018",
"dr": "55420",
"cr": "0",
"bal": "55420"
}, {
"ldat": "2014-10-11",
"eid": "HBL056",
"dr": "0",
"cr": "35000",
"bal": "20420"
}, {
"ldat": "2014-10-26",
"eid": "HBL001",
"dr": "0",
"cr": "420",
"bal": "20000"
}, {
"ldat": "2015-11-01",
"eid": "HDL001",
"dr": "0",
"cr": "20000",
"bal": "0"
}];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>Net Balance {{ legTot }}</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<td class="text-center">#</td>
<td class="text-center">Last Trans</td>
<td class="text-center">Dr</td>
<td class="text-center">Cr</td>
<td class="text-center">Balance</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data track by $index">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.ldat}}</td>
<td class="text-right">{{ x.dr }}</td>
<td class="text-right">{{ x.cr }}</td>
<td class="text-right" ng-init="addBal(x.bal*1)">{{ x.bal }}
</td>
</tr>
</tbody>
</table>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
