计算AngularJS的总价

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

从<p></p> 标记调用 sum 方法不是最佳做法，因为摘要循环可能会多次触发它。您可能会按照这种方式来实现相同的目标。也不建议在生产环境中使用 angular $scope，因此请使用控制器实例的 this。

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

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@2.0.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyController as ctrl">

  <div ng-repeat="product in ctrl.product_details">
    <p>{{ product.name }}</p>
    <p>{{ product.price }}</p>
  </div>

  <button type="button" ng-click="ctrl.sum()">Calculate total</button>
  <input type="text" ng-model="ctrl.total">

</body>

</html>

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

调用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 4

一种方法是这样的，

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