[英]Adding string Array in Angular
I have created this app in Angular as a practice can't seem to add the amount to a total value... Here is the Code I need to put the total value of the amount. 我在Angular中创建了此应用,因为实践似乎无法将金额添加到总价值中……这是我需要将金额的总价值放入代码中。
<body>
<div class="container" ng-app="myApp" ng-controller="namesCtrl">
<div class="col-sm-6"><br>
<button class="btn btn-default" ng-click="myFunc()">Show me the Table</button><br>
<div ng-show="showMe">
<table class="table" width="80%" border="2px">
<tr class="panel panel-default">
<th> Names</th>
<th>Country</th>
<th>Amount</th>
</tr>
<tr ng-repeat= "x in names">
<td class="info"> {{x.name}}</td>
<td class="danger">{{x.country}}</td>
<td class="default">{{x.amount}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var app=angular.module("myApp", []);
app.controller("namesCtrl", function($scope){
$scope.names = [
{name:'Jani',country:'Norway', amount:'321'},
{name:'Carl',country:'Sweden',amount:'2231'},
{name:'Margareth',country:'England',amount:'521'},
{name:'Hege',country:'Norway',amount:'1720'},
{name:'Joe',country:'Denmark',amount:'376'},
{name:'Gustav',country:'Sweden',amount:'3040'},
{name:'Birgit',country:'Denmark',amount:'1115'},
{name:'Mary',country:'England',amount:'4501'},
{name:'Kai',country:'Norway',amount:'4533'}
];
$scope.showMe=false;
$scope.myFunc=function(){
$scope.showMe=!$scope.showMe;
}
});
</script>
</body>
</html>
it would be help ful for me to Know how to add the amount to a total value. 知道如何将金额加到总价值上对我很有帮助。
Using Array.prototype.reduce()
: 使用Array.prototype.reduce()
:
$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount));
Note that you would need to use parseFloat()
instead of parseInt()
if your amounts contain decimal values. 请注意,如果您的金额包含十进制值,则需要使用parseFloat()
而不是parseInt()
。
Here's a complete snippet: 这是完整的代码段:
var $scope = {}; $scope.names = [ {name:'Jani',country:'Norway', amount:'321'}, {name:'Carl',country:'Sweden',amount:'2231'}, {name:'Margareth',country:'England',amount:'521'}, {name:'Hege',country:'Norway',amount:'1720'}, {name:'Joe',country:'Denmark',amount:'376'}, {name:'Gustav',country:'Sweden',amount:'3040'}, {name:'Birgit',country:'Denmark',amount:'1115'}, {name:'Mary',country:'England',amount:'4501'}, {name:'Kai',country:'Norway',amount:'4533'} ]; $scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount), 0); console.log($scope.total);
you can use javascript reduce
method to get the sum of array 您可以使用javascript reduce
方法获取数组的总和
ES6 implementation ES6实施
$scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);
ES5 implementation ES5实施
$scope.sum = $scope.names.reduce(function(a,b){
return a + parseInt(b.amount)
},0);
Demo 演示版
angular.module("app",[]) .controller("ctrl",function($scope){ $scope.names = [ {name:'Jani',country:'Norway', amount:'321'}, {name:'Carl',country:'Sweden',amount:'2231'}, {name:'Margareth',country:'England',amount:'521'}, {name:'Hege',country:'Norway',amount:'1720'}, {name:'Joe',country:'Denmark',amount:'376'}, {name:'Gustav',country:'Sweden',amount:'3040'}, {name:'Birgit',country:'Denmark',amount:'1115'}, {name:'Mary',country:'England',amount:'4501'}, {name:'Kai',country:'Norway',amount:'4533'} ]; /// es6 $scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0); console.log('es6 - '+$scope.sum) /// es5 $scope.sum = $scope.names.reduce(function(a,b){ return a + parseInt(b.amount) },0); console.log("es5 - "+$scope.sum) })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.