AngularJS ng-init is not working in ng-repeat

Question

AngularJS ng-init is not working in ng-repeat

7.6k views Asked by B.Balamanigandan At 24 November 2024 at 07:35

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.

Original Q&A

There are 2 answers

Stepan Kasyanenko On 10 February 2016 at 04:42

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>

**elango.dev** · Accepted Answer · 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:"&#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>

TechQA.

AngularJS ng-init is not working in ng-repeat

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-REPEAT

Related Questions in ANGULARJS-NG-INIT

Related Questions in NG-INIT

Popular Questions

Popular Tags

Trending Questions