AngularJS ng-init 在 ng-repeat 中不工作

Question

我需要 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 循环来实现这一点。

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

Answer 2

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>

AngularJS ng-init 在 ng-repeat 中不工作

AngularJS ng-init is not working in ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-init

ng-init