使用AngularJS计算总量答案

【问题标题】：Calculate the total amount using AngularJS使用AngularJS计算总量
【发布时间】：2025-12-18 06:30:01
【问题描述】：

我正在尝试使用 AngularJS 计算总量。想要计算上图中突出显示的总花费。任何帮助将不胜感激。

我的 HTML：-

<body ng-app="nombre">

<div class="container">
    <div class="row">
        <div class="col-12">
            <form class="row" id="nombre">
                <div class="input-group mb-3">
                  <input type="text" class="form-control col-9" id="Spentfor" name="Spentfor" placeholder="Spent for">
                  <input type="text" class="form-control col-3" id="SpentAmount" name="SpentAmount" placeholder="Spent Amount">
                  <div class="input-group-append">
                    <button id="add" class="btn" type="submit">Add</button> 
                  </div>
                </div>
            </form>     
        </div>
    </div>
</div>


<div class="container" ng-controller="budgetCtrl">
    <div class="row list" ng-repeat="kasu in panam">
        <div class="col-6"> {{ kasu.title }} </div>
        <div class="col-6 text-right total">
            {{ kasu.spent | currency:"₹" }}
        </div>

    </div>

    <div class="row">
        <div class="col-6"> Total Money spend </div>
        <div class="col-6 overalltotal"> {{ getTotal() }} </div>
    </div>
</div>
</body>

我的 JS：-

var nombre = angular.module('nombre', ['ngRoute', 'firebase']);

nombre.controller('budgetCtrl', ['$scope', 'money', '$firebaseObject', function($scope, money, $firebaseObject){
    money.then(function(data){
        $scope.cash = data;
        // $scope.pisa = data.desktop;
    });

    var ref = firebase.database().ref();
    $scope.panam = $firebaseObject(ref);
    var pa = $scope.panam;

    $("#nombre").submit(function() { 
        $(this), console.log("Submit to Firebase");
        var Spentfor = $("#Spentfor").val(),
            SpentAmount = $("#SpentAmount").val(),
            total = { title: Spentfor, spent: SpentAmount};
        alert(total);

        return ref.push().set(total).then(function() { 
            $("#Spentfor, #SpentAmount").val("");
        });

    });

    $scope.getTotal = function(){
        // edit here
    }

}]);

nombre.factory('money', ['$http', function($http){
    return $http.get('budget.json')
            .then(function(response){
               return data = response.data;
            }, function(error){
                alert('error');
            });
}]);

我正在努力完成它。

$scope.getTotal = function(){}

以上数据是从 firebase 调用的。我正在尝试计算使用 AngularJS 花费的总金额。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html angularjs math

【解决方案1】：

根据您在 HTML 模板中显示的数据，这应该可以：

$scope.getTotal = function(){
  let total = 0;
  $scope.panam.forEach(p => {
    total += parseFloat(p.spent);
  });
  return total;
}

迭代您的所有项目 (panam)，并将 spent 编号添加到您在函数 getTotal 中发回的 total。

【讨论】：

它的工作。但它只是一个接一个地添加值，如 050120143143112201201502905029041。我想要得到总值。 @Zooly
我明白了，因为您的值是字符串。编辑了我的答案:)
我在p.spent数据之前添加了一个parseFloat函数
是的，我的错。它就像一个魅力。谢谢好友。

【解决方案2】：

您可以拨打getTotal并传递pa

let total =0;
$scope.getTotal = function(obj){
    obj.forEach(function(item){
     total += parseFloat(item.spent)
 })
}
var pa = $scope.panam;
$scope.getTotal(pa)

【讨论】：

【解决方案3】：

您可以遍历并将其添加到总数中

$scope.total = 0;
money.then(function(data){
        $scope.cash = data;

         // if cash is array of object
          $scope.getTotal();

    });
$scope.getTotal = function(){
    $scope.cash.forEach((val) => {
             $scope.total += val.spent;
          })
}

【讨论】：