Javascript 在角数组中添加字符串数组_Javascript_Angularjs

Javascript 在角数组中添加字符串数组

javascript angularjs

Javascript 在角数组中添加字符串数组,javascript,angularjs,Javascript,Angularjs,我已经在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()">Sh

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

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




给我看看桌子

名字
国家
数量
{{x.name}
{{x.country}
{{x.amount}}
var-app=angular.module（“myApp”，[]）；
app.controller（“namesCtrl”，函数（$scope）{
$scope.names=[
{姓名：'Jani'，国家：'Norway'，金额：'321'}，
{姓名：'Carl'，国家：'Sweden'，金额：'2231'}，
{姓名：'Margareth'，国家：'England'，金额：'521'}，
{姓名：'Hege'，国家：'挪威'，金额：'1720'}，
{姓名：'Joe'，国家：'Denmark'，金额：'376'}，
{姓名：'Gustav'，国家：'Sweden'，金额：'3040'}，
{名称：'Birgit'，国家：'Denmark'，金额：'1115'}，
{姓名：'Mary'，国家：'England'，金额：'4501'}，
{姓名：'Kai'，国家：'挪威'，金额：'4533'}
];
$scope.showMe=false；
$scope.myFunc=function（）{
$scope.showMe=！$scope.showMe；
}
});

如果我知道如何将金额添加到总值中，那将非常有帮助。

使用：

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

请注意，如果金额包含十进制值，则需要使用

parseFloat（）

而不是

parseInt（）

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

以下是完整的片段：

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

var$scope={}；
$scope.names=[
{姓名：'Jani'，国家：'Norway'，金额：'321'}，
{姓名：'Carl'，国家：'Sweden'，金额：'2231'}，
{姓名：'Margareth'，国家：'England'，金额：'521'}，
{姓名：'Hege'，国家：'挪威'，金额：'1720'}，
{姓名：'Joe'，国家：'Denmark'，金额：'376'}，
{姓名：'Gustav'，国家：'Sweden'，金额：'3040'}，
{名称：'Birgit'，国家：'Denmark'，金额：'1115'}，
{姓名：'Mary'，国家：'England'，金额：'4501'}，
{姓名：'Kai'，国家：'挪威'，金额：'4533'}
];
$scope.total=$scope.names.reduce（（a，v）=>a+parseInt（v.amount），0）；
log（$scope.total）使用：
<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>

请注意，如果金额包含十进制值，则需要使用parseFloat（）
而不是parseInt（）

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

以下是完整的片段：
<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>


var$scope={}；
$scope.names=[
{姓名：'Jani'，国家：'Norway'，金额：'321'}，
{姓名：'Carl'，国家：'Sweden'，金额：'2231'}，
{姓名：'Margareth'，国家：'England'，金额：'521'}，
{姓名：'Hege'，国家：'挪威'，金额：'1720'}，
{姓名：'Joe'，国家：'Denmark'，金额：'376'}，
{姓名：'Gustav'，国家：'Sweden'，金额：'3040'}，
{名称：'Birgit'，国家：'Denmark'，金额：'1115'}，
{姓名：'Mary'，国家：'England'，金额：'4501'}，
{姓名：'Kai'，国家：'挪威'，金额：'4533'}
];
$scope.total=$scope.names.reduce（（a，v）=>a+parseInt（v.amount），0）；
log（$scope.total）
您可以使用javascriptreduce
方法来获取数组的和
<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>

ES6实施
<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>

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

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

ES5实施
<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>

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

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

演示
角度模块（“应用程序”，[]）
.controller（“ctrl”，函数（$scope）{
$scope.names=[
{姓名：'Jani'，国家：'Norway'，金额：'321'}，
{姓名：'Carl'，国家：'Sweden'，金额：'2231'}，
{姓名：'Margareth'，国家：'England'，金额：'521'}，
{姓名：'Hege'，国家：'挪威'，金额：'1720'}，
{姓名：'Joe'，国家：'Denmark'，金额：'376'}，
{姓名：'Gustav'，国家：'Sweden'，金额：'3040'}，
{名称：'Birgit'，国家：'Denmark'，金额：'1115'}，
{姓名：'Mary'，国家：'England'，金额：'4501'}，
{姓名：'Kai'，国家：'挪威'，金额：'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（函数（a，b）{
返回a+parseInt（b.amount）
},0);
log（“es5-”+$scope.sum）
})

您可以使用javascript

reduce

方法来获取数组的和

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

ES6实施

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

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

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

ES5实施

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

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

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

演示角度模块（“应用程序”，[]） .controller（“ctrl”，函数（$scope）{ $scope.names=[ {姓名：'Jani'，国家：'Norway'，金额：'321'}， {姓名：'Carl'，国家：'Sweden'，金额：'2231'}， {姓名：'Margareth'，国家：'England'，金额：'521'}， {姓名：'Hege'，国家：'挪威'，金额：'1720'}， {姓名：'Joe'，国家：'Denmark'，金额：'376'}， {姓名：'Gustav'，国家：'Sweden'，金额：'3040'}， {名称：'Birgit'，国家：'Denmark'，金额：'1115'}， {姓名：'Mary'，国家：'England'，金额：'4501'}， {姓名：'Kai'，国家：'挪威'，金额：'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（函数（a，b）{ 返回a+parseInt（b.amount） },0); log（“es5-”+$scope.sum） })

这似乎是一个家庭作业：P这似乎是一个家庭作业：P