Question

我已经在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>

对我来说，知道如何将金额加到总价值上会很有帮助。

Answer 1

使用Array.prototype.reduce()：

$scope.total = $scope.names.reduce((a, v) => a + parseInt(v.amount));

请注意，如果您的金额包含小数值，则需要使用parseFloat()而不是parseInt()。

这是一个完整的片段：

＆＃13;

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);

＆＃13;

Answer 2

试试这个

＆＃13;

<html>


<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>
				total:{{total}}
			</div>  
		</div>
	</div>  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

	<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;

			};
		    $scope.total = 0;

			angular.forEach($scope.names,function(index) {
				$scope.total = $scope.total + Number(index.amount);
			})




		});

	</script>
</body>
</html>

＆＃13;

Answer 3

您可以使用javascript reduce方法获取数组的总和

ES6实施

$scope.sum = $scope.names.reduce((a, b) => a + parseInt(b.amount), 0);

ES5实施

$scope.sum = $scope.names.reduce(function(a,b){
  return  a + parseInt(b.amount)
},0);

演示

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>

在Angular中添加字符串数组

3 个答案: