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