AngularJS ng-init is not working in ng-repeat
Question
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.
2 answers
solution1
2 ACCPTED 2016-02-10 06:39:32
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>
solution2
1 2016-02-10 04:42:25
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.