Question

我尝试使用此代码来获取所有detalle.price元素总和的最终数量。它们都是数字，所以我需要将它们相加并在sum()上发布最终数字。

<div id="pedidos_table">
  <div id="pedidos_table_item" ng-repeat="detalle in detalles">
    <p id="pedidos_table_item_name">{{detalle.name}}</p>
    <p id="pedidos_table_item_price">{{detalle.price}}$</p>
  </div>
</div>
<div id="pedidos_table_total">
  <p id="pedidos_table_item_name">TOTAL</p>
  <p id="pedidos_table_item_price">{{sum()}}$</p>
</div>

我试过这样做：

$scope.sum = function(){
var total = 0;
total += detalle.price;
return total
}

我知道有些东西遗失了，但我不知道是什么。

Answer 1

从JComboBox标记调用sum方法不是最佳做法，因为摘要周期可能会多次触发它。您可以按照这种方式实现同样的目标。还不建议在生产环境中使用角度<p></p>，因此使用控制器实例的$scope。

＆＃13;

this

＆＃13;

// Code goes here
(function(angular) {
  angular.module('myApp', []);

  angular.module('myApp').controller('MyController', MyController);

  MyController.$inject = ['$scope'];

  function MyController($scope) {
    var vm = this;

    this.product_details = [{
      name: 'XXX',
      price: 25
    }, {
      name: 'YYY',
      price: 30
    }, {
      name: 'ZZZ',
      price: 67
    }];

    vm.total = 0;
    vm.sum = sum;

    function sum() {
      angular.forEach(vm.product_details, function(key, value) {
        vm.total += key.price
      });
    }
  }
})(angular);

＆＃13;

Answer 2

您可以让angular.forEach遍历数组并计算总数。

 $scope.sum = function() {
    var total = 0;
    angular.forEach($scope.detalles, function(key, value) {
      total += key.price;
    });
    return total;
  }

<强>样本

var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
 $scope.detalles = [{
    name: 'Bush',
    price: 2,
    Total:0
  }, {
    name: 'Obama',
    price: 5,
    Total:0
  }, {
    name: 'Trump',
    price: 3,
    Total:0
  }]; 
  
   $scope.sum = function() {
    var total = 0;
    angular.forEach($scope.detalles, function(key, value) {
      total += key.price;
    });
    return total;
  }
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
 </head>
<div ng-app="app">
  <div ng-controller="appCtrl">
    <div id="pedidos_table">
  <div id="pedidos_table_item" ng-repeat="detalle in detalles">
    <p id="pedidos_table_item_name">{{detalle.name}}</p>
    <p id="pedidos_table_item_price">{{detalle.price}}$</p>
  </div>
</div>
<div id="pedidos_table_total">
  <p id="pedidos_table_item_name">TOTAL</p>
  <p id="pedidos_table_item_price">{{sum()}}$</p>
</div>
  </div>
</div>
</html>

Answer 3

在$scope.sun()函数中details.price将undefined。

将总和功能修改为

$scope.sum = function(){
var total = 0;
angular.forEach($scope.detalles, function(key, value) {
  total = total key.price;
})
return total;
}

这将返回总价格，即总和。

Answer 4

当你打电话给api时，你可以不用点击按钮。

var app = angular.module('app', []);
app.controller('appCtrl', function($scope) {
      $scope.sum = 0;
      $http.post(url')
                .success(function (response) {
                  $scope.detalles = response;
                  sum($scope.detalles);  //call sum function
                 }).error(function (response, status, headers, config) {
                    //error
                 });


 function sum(priceArray) {

    angular.forEach(priceArray, function(key, value) {
      $scope.sum += key.price;
    });
  }

}）;

 <div id="pedidos_table">
      <div id="pedidos_table_item" ng-repeat="detalle in detalles">
        <p id="pedidos_table_item_name">{{detalle.name}}</p>
        <p id="pedidos_table_item_price">{{detalle.price}}$</p>
      </div>
    </div>
    <div id="pedidos_table_total">
      <p id="pedidos_table_item_name">TOTAL</p>
      <p id="pedidos_table_item_price">{{sum}}</p>
    </div>

Answer 5

这是一种方法，

<div id="pedidos_table">
  <div id="pedidos_table_item" ng-repeat="detalle in detalles">
    <p id="pedidos_table_item_name">{{detalle.name}}</p>
    <p id="pedidos_table_item_price">{{detalle.price}}$</p>
  </div>
</div>

<div id="pedidos_table_total">
  <p id="pedidos_table_item_name">TOTAL</p>
  <p id="pedidos_table_item_price">{{sum(detalles);}}$</p>
</div>

// this approach can be use dynamically but the other is for a specific requirement
// in this function will get data from the view directly the parsing objects from the data and by adding all the prices, will give total value
    $scope.sum = function(data){
    var total = 0 ;
    angular.forEach(data,function(value,key){
    total += value.price;
    });
    return total
    }

第二种方法是，

<div id="pedidos_table">
      <div id="pedidos_table_item" ng-repeat="detalle in detalles">
        <p id="pedidos_table_item_name">{{detalle.name}}</p>
        <p id="pedidos_table_item_price">{{detalle.price}}$</p>
      </div>
    </div>

    <div id="pedidos_table_total">
      <p id="pedidos_table_item_name">TOTAL</p>
      <p id="pedidos_table_item_price">{{sum();}}$</p>
    </div>

    $scope.sum = function(){
    var total = 0 ;
    angular.forEach($scope.detalles,function(value,key){ // this will get array of elements of parse the objects of it
      total += value.price;
    });
    return total
    }

计算AngularJS的总价

5 个答案: