计算总价 AngularJS
Calculate total price in AngularJS
我试图让这段代码获得所有 detalle.price
元素总和的最终数字。它们都是数字,所以我需要对它们求和 post 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
}
我知道少了什么,但我不知道是什么。
您可以 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>
从 <p></p>
标记调用求和方法不是最佳做法,因为摘要循环可能会多次触发它。您可以按照这种方式来实现相同的目的。此外,不建议在生产环境中使用 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>
调用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>
一种方法是这样,
<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
}
我试图让这段代码获得所有 detalle.price
元素总和的最终数字。它们都是数字,所以我需要对它们求和 post 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
}
我知道少了什么,但我不知道是什么。
您可以 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>
从 <p></p>
标记调用求和方法不是最佳做法,因为摘要循环可能会多次触发它。您可以按照这种方式来实现相同的目的。此外,不建议在生产环境中使用 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>
调用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>
一种方法是这样,
<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
}