我需要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:"₹" }}</td>
<td class="text-right">{{ x.cr | currency:"₹" }}</td>
<td class="text-right" ng-init="legTot = legTot + x.bal | number">{{ x.bal | currency:"₹" }}</td>
</tr>
</tbody>
</table>
在这里,我使用
ng-init="legTot = legTot + x.bal | number"
求和了余额legTot
是一个范围变量。我无法获得总数。请帮助我如何在AngularJS Controller 函数中不使用foreach循环的情况下实现此目标。
最佳答案
ng-init创建新的子范围。若要将范围变量从父级继承到子级,应将这些变量放入对象。在 Controller 的作用域中,创建名称为“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:"₹" }}</td>
<td class="text-right">{{ x.cr | currency:"₹" }}</td>
<td class="text-right" ng-init="vm.legTot = vm.legTot + Number(x.bal)">{{ x.bal | currency:"₹" }}</td>
</tr>
</tbody>
</table>