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:"&#8377;" }}</td>
      <td class="text-right">{{ x.cr | currency:"&#8377;" }}</td>
      <td class="text-right" ng-init="legTot = legTot + x.bal | number">{{ x.bal | currency:"&#8377;" }}</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.

I believe `ng-init` should be on the same element as `ng-repeat` — sg.cc, Feb 10 '16 at 01:39
There are only a few appropriate uses of `ngInit`, such as for aliasing special properties of `ngRepeat`; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than `ngInit` to initialize values on a scope. — georgeawg, Feb 10 '16 at 02:12
you aren't accounting for child scopes created by ng-repeat. This needs to be done in controller — charlietfl, Feb 10 '16 at 02:37

elango.dev · Accepted Answer · 2016-02-11T10:33:24.227

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:"&#8377;" }}</td>
      <td class="text-right">{{ x.cr | currency:"&#8377;" }}</td>
      <td class="text-right" ng-init="vm.legTot = vm.legTot + Number(x.bal)">{{ x.bal | currency:"&#8377;" }}</td>
    </tr>
  </tbody>
</table>

It Showing the Net Balance 05542020420200000. It considers the number as a sting, so it concatenates the number. Kindly check it once... — B.Balamanigandan, Feb 10 '16 at 07:00
Because x.bal is string. I have edited the code. ng-init="vm.legTot = vm.legTot + Number(x.bal)" should work. I have updated the answer — elango.dev, Feb 11 '16 at 10:34

score 1 · Answer 2 · edited Feb 10 '16 at 06:20

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>

In html template you are using filter `number` (`legTot = legTot + x.bal | number`). Because i'm adding value in JS, then simplest way convert **string** to **number** is multiply buy 1. — Stepan Kasyanenko, Feb 10 '16 at 07:03

AngularJS ng-init is not working in ng-repeat

2 Answers2