3

我需要 HTML 中的以下数据中的余额总和，而不是 JS 控制器函数中的余额。所以，我在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 循环的情况下实现这一点。

4

2 回答 2

3

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>
于 2016-02-10T06:39:32.727 回答
1

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

于 2016-02-10T04:42:25.183 回答