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
– sg.cc, Commented Feb 10, 2016 at 1: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
– georgeawg, Commented Feb 10, 2016 at 2:12
you aren't accounting for child scopes created by ng-repeat. This needs to be done in controller — charlietfl
– charlietfl, Commented Feb 10, 2016 at 2:37

elango.dev · Accepted Answer · 2016-02-11 10:33:24Z

3

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>

edited Feb 11, 2016 at 10:33

answered Feb 10, 2016 at 6:39

elango.dev

1541 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B.Balamanigandan Over a year ago

It Showing the Net Balance 05542020420200000. It considers the number as a sting, so it concatenates the number. Kindly check it once...

elango.dev Over a year ago

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

B.Balamanigandan · Accepted Answer · 2016-02-10 06:20:52Z

1

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>

edited Feb 10, 2016 at 6:20

B.Balamanigandan

4,93313 gold badges79 silver badges139 bronze badges

answered Feb 10, 2016 at 4:42

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

2 Comments

B.Balamanigandan Over a year ago

Let I know why you are multiplying the x.bal with 1 ?

Stepan Kasyanenko Over a year ago

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.

Collectives™ on Stack Overflow

AngularJS ng-init is not working in ng-repeat

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related