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

【问题标题】：AngularJS ng-init is not working in ng-repeatAngularJS ng-init 在 ng-repeat 中不起作用
【发布时间】：2016-02-10 01:38:45
【问题描述】：

我需要 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 循环的情况下实现这一点。

【问题讨论】：

我相信ng-init应该和ng-repeat在同一个元素上
ngInit只有少数合适的用法，比如给ngRepeat的特殊属性起别名；以及通过服务器端脚本注入数据。除了这几种情况，您应该使用控制器而不是ngInit 来初始化作用域上的值。
您没有考虑 ng-repeat 创建的子范围。这需要在控制器中完成

标签： javascript angularjs angularjs-ng-repeat angularjs-ng-init ng-init

【解决方案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>

【讨论】：

它显示净余额 05542020420200000。它认为这个数字是一个刺，所以它连接了这个数字。请检查一次...
因为 x.bal 是字符串。我已经编辑了代码。 ng-init="vm.legTot = vm.legTot + Number(x.bal)" 应该可以工作。我已经更新了答案

【解决方案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>

【讨论】：

让我知道你为什么要将 x.bal 与 1 相乘？
在 html 模板中，您正在使用过滤器 number (legTot = legTot + x.bal | number)。因为我在 JS 中添加值，所以将 string 转换为 number 的最简单方法是乘以购买 1。