简体   繁体   English

在Angular中添加字符串数组

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM