javascript - 在 Angular 中添加字符串数组

标签 javascript angularjs

我在 Angular 中创建了这个应用程序,作为一种练习,似乎无法将金额添加到总值(value)中...这是我需要输入总金额的代码。

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

了解如何将金额添加到总值(value)中会对我很有帮助。

最佳答案

使用Array.prototype.reduce() :

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

请注意,如果您的金额包含十进制值,则需要使用 parseFloat() 而不是 parseInt()

这是一个完整的片段:

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

关于javascript - 在 Angular 中添加字符串数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43109209/

相关文章:

javascript - 使用 Appbar + 抽屉时遇到问题(Material UI + ReactJS)

javascript - 如何将 &lt;script&gt; 中的数组从 JSP 页面传递到 Servlet

java - Java、Spring 和 Angularjs Web 应用程序的最佳方法是什么?

javascript - 使用 typeahead 的 Angular float 输入标签

javascript - 如何在JS函数中调用AngularJS函数

javascript - 当 Redux 状态发生变化时,除了一个组件之外的所有组件都会获得更新值

javascript - 将变量值放入另一个 javascript 中

javascript - 为什么要在react中输出之前的props?

css - 在 jhipser 中执行 gulp install 后对 main.css 的修改丢失

javascript - $location.path 获取之前的路径