我需要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:"₹" }}</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控制器函数中没有foreach循环的情况下实现此目的。
答案 0 :(得分:2)
ng-init创建新的子范围。要将范围变量从父级继承到子级,应将这些变量放在对象中。在控制器的范围内,创建名称为&#39; vm&#39;并把你的腿&#39; legTot&#39;里面的变量。
$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>
答案 1 :(得分: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"
}];
});
&#13;
<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>
&#13;