AngularJS ng-init在ng-repeat中不起作用

Question

我需要HTML中的以下数据而不是JS Controller Function中的余额总和。 因此，我在ng-repeat中使用了ng-init 。 但是我无法得到结果。

我的JSON数据是

{
   "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"
      }
   ]
}

我的HTML是

<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>

在这里，我使用ng-init="legTot = legTot + x.bal | number"来总结余额legTot是一个范围变量。

我无法获得总数。 请帮助我如何在没有AngularJS控制器函数中的foreach循环的情况下实现此目标。

Answer 1

ng-init创建新的子范围。 若要将范围变量从父级继承到子级，应将这些变量放入对象中。 在控制器的作用域中，创建名称为“ vm”的对象，并将“ legTot”变量放入其中。

$scope.vm = {legTot: 0}

并更改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>

Answer 2

没有forEach循环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>

AngularJS ng-init在ng-repeat中不起作用

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-02-10 06:39:32

解决方案2
1 2016-02-10 04:42:25

AngularJS ng-init在ng-repeat中不起作用

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-02-10 06:39:32

解决方案2 1 2016-02-10 04:42:25

解决方案1
2 已采纳 2016-02-10 06:39:32

解决方案2
1 2016-02-10 04:42:25