Angular에서 반복된 요소의 합계 계산JS ng 반복
다음 스크립트는 다음을 사용하여 쇼핑 카트를 표시합니다.ng-repeat각 및소계, 소계, 소계, 소계, . ., 량 ), 량 ), 가 ) ), ) )가 )가 （ ） 。product.price * product.quantity를 참조해 주세요.
반복 요소의 총 가격을 계산하는 가장 간단한 방법은 무엇입니까?
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td></td> <!-- Here is the total value of my cart -->
</tr>
</table>
템플릿 내
<td>Total: {{ getTotal() }}</td>
컨트롤러 내
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.cart.products.length; i++){
var product = $scope.cart.products[i];
total += (product.price * product.quantity);
}
return total;
}
이 또한 필터와 일반 목록 모두에서 작동합니다.리스트의 모든 값의 합계에 대한 새 필터를 먼저 만들고 총 수량의 합계에 대한 해결책도 제시합니다.세부 코드는 피들러 링크를 확인합니다.
angular.module("sampleApp", [])
.filter('sumOfValue', function () {
return function (data, key) {
if (angular.isUndefined(data) || angular.isUndefined(key))
return 0;
var sum = 0;
angular.forEach(data,function(value){
sum = sum + parseInt(value[key], 10);
});
return sum;
}
}).filter('totalSumPriceQty', function () {
return function (data, key1, key2) {
if (angular.isUndefined(data) || angular.isUndefined(key1) || angular.isUndefined(key2))
return 0;
var sum = 0;
angular.forEach(data,function(value){
sum = sum + (parseInt(value[key1], 10) * parseInt(value[key2], 10));
});
return sum;
}
}).controller("sampleController", function ($scope) {
$scope.items = [
{"id": 1,"details": "test11","quantity": 2,"price": 100},
{"id": 2,"details": "test12","quantity": 5,"price": 120},
{"id": 3,"details": "test3","quantity": 6,"price": 170},
{"id": 4,"details": "test4","quantity": 8,"price": 70}
];
});
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
<label>Search</label>
<input type="text" class="form-control" ng-model="searchFilter" />
</div>
<div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">
<h4>Id</h4>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">
<h4>Details</h4>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
<h4>Quantity</h4>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
<h4>Price</h4>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
<h4>Total</h4>
</div>
<div ng-repeat="item in resultValue=(items | filter:{'details':searchFilter})">
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">{{item.id}}</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">{{item.details}}</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity}}</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.price}}</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity * item.price}}</div>
</div>
<div colspan='3' class="col-md-8 col-lg-8 col-sm-8 col-xsml-8 text-right">
<h4>{{resultValue | sumOfValue:'quantity'}}</h4>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
<h4>{{resultValue | sumOfValue:'price'}}</h4>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
<h4>{{resultValue | totalSumPriceQty:'quantity':'price'}}</h4>
</div>
</div>
</div>
</div>
이 바이올린 링크를 체크합니다.
이것은 오래전에 회답이 되었지만, 제시되지 않은 다른 어프로치를 투고하고 싶다고 생각하고 있었습니다.
ng-init합계를 내겠습니다.이렇게 하면 HTML에서 반복하고 컨트롤러에서 반복할 필요가 없습니다.더 것이 .)(집계 로직이 더 복잡하다면 로직을 컨트롤러 또는 서비스로 적절히 옮기는 것이 좋습니다.)
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td ng-init="itemTotal = product.price * product.quantity; controller.Total = controller.Total + itemTotal">{{itemTotal}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td>{{ controller.Total }}</td> // Here is the total value of my cart
</tr>
'/'/'/'를 만 하면 .Total 추가:
// random controller snippet
function yourController($scope..., blah) {
var vm = this;
vm.Total = 0;
}
은 안에 있는 것을 할 수 .ng-repeat이하에 따라 주세요.
<tbody ng-init="total = 0">
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.quantity }}</td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td>${{ total }}</td>
</tr>
</tbody>
결과는 이쪽에서 확인하세요.http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview
자동 갱신 결과 : http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (감사합니다 - VicJordan )
이것이 나의 해결책이다.
스위트하고 심플한 커스텀 필터:
의 합에만 sumProduct을 이용하다
angular.module('myApp', [])
.filter('total', function () {
return function (input, property) {
var i = input instanceof Array ? input.length : 0;
// if property is not defined, returns length of array
// if array has zero length or if it is not an array, return zero
if (typeof property === 'undefined' || i === 0) {
return i;
// test if property is number so it can be counted
} else if (isNaN(input[0][property])) {
throw 'filter total can count only numeric values';
// finaly, do the counting and return total
} else {
var total = 0;
while (i--)
total += input[i][property];
return total;
}
};
})
JS 바이올린
편집: sum Product
은 것은입니다.sumProduct필터는 임의의 수의 인수를 받아들입니다., 속성 속성)을할 수 .property.nested
- 0 인수를 전달하면 입력 데이터의 길이가 반환됩니다.
- 인수를 하나만 전달하면 해당 속성 값의 단순 합계가 반환됩니다.
- 더 많은 인수를 전달하면 전달된 속성 값의 곱(속성의 스칼라 합)이 반환됩니다.
여기 JS Fielle과 코드가 있습니다.
angular.module('myApp', [])
.filter('sumProduct', function() {
return function (input) {
var i = input instanceof Array ? input.length : 0;
var a = arguments.length;
if (a === 1 || i === 0)
return i;
var keys = [];
while (a-- > 1) {
var key = arguments[a].split('.');
var property = getNestedPropertyByKey(input[0], key);
if (isNaN(property))
throw 'filter sumProduct can count only numeric values';
keys.push(key);
}
var total = 0;
while (i--) {
var product = 1;
for (var k = 0; k < keys.length; k++)
product *= getNestedPropertyByKey(input[i], keys[k]);
total += product;
}
return total;
function getNestedPropertyByKey(data, key) {
for (var j = 0; j < key.length; j++)
data = data[key[j]];
return data;
}
}
})
JS 바이올린
심플한 솔루션
여기 간단한 해결책이 있습니다.루프에 대한 추가는 필요하지 않습니다.
HTML 부품
<table ng-init="ResetTotalAmt()">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td ng-init="CalculateSum(product)">{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td>{{cart.TotalAmt}}</td> // Here is the total value of my cart
</tr>
</table>
스크립트 부품
$scope.cart.TotalAmt = 0;
$scope.CalculateSum= function (product) {
$scope.cart.TotalAmt += (product.price * product.quantity);
}
//It is enough to Write code $scope.cart.TotalAmt =0; in the function where the cart.products get allocated value.
$scope.ResetTotalAmt = function (product) {
$scope.cart.TotalAmt =0;
}
Vaclav의 답변에서 이 특정 계산을 푸는 또 다른 방법, 즉 각 행의 계산입니다.
.filter('total', function () {
return function (input, property) {
var i = input instanceof Array ? input.length : 0;
if (typeof property === 'undefined' || i === 0) {
return i;
} else if (typeof property === 'function') {
var total = 0;
while (i--)
total += property(input[i]);
return total;
} else if (isNaN(input[0][property])) {
throw 'filter total can count only numeric values';
} else {
var total = 0;
while (i--)
total += input[i][property];
return total;
}
};
})
계산을 사용하려면 스코프에 계산 함수를 추가하면 됩니다.
$scope.calcItemTotal = function(v) { return v.price*v.quantity; };
사용할 수 있습니다.{{ datas|total:calcItemTotal|currency }}HTML " " " " " " " 。필터를 사용하여 단순 또는 복잡한 합계에 사용할 수 있기 때문에 모든 다이제스트에 대해 호출되지 않는다는 장점이 있습니다.
이것은 ng-repeat 및 ng-init을 사용하여 모든 값을 집계하고 항목을 사용하여 모델을 확장하는 간단한 방법입니다.총재산
<table>
<tr ng-repeat="item in items" ng-init="setTotals(item)">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.unitCost | number:2}}</td>
<td>{{item.total | number:2}}</td>
</tr>
<tr class="bg-warning">
<td>Totals</td>
<td>{{invoiceCount}}</td>
<td></td>
<td>{{invoiceTotal | number:2}}</td>
</tr>
</table>
ngInit 디렉티브는 각 항목의 설정 합계 함수를 호출합니다.컨트롤러의 setTotals 함수는 각 항목의 합계를 계산합니다.또한 invoiceCount와 invoice를 사용합니다.모든 항목의 수량 및 총계를 집계(합계)하는 총 범위 변수입니다.
$scope.setTotals = function(item){
if (item){
item.total = item.quantity * item.unitCost;
$scope.invoiceCount += item.quantity;
$scope.invoiceTotal += item.total;
}
}
자세한 내용과 데모는 다음 링크를 참조하십시오.
http://www.ozkary.com/2015/06/angularjs-calculate-totals-using.html
데이터 집합 개체 배열과 각 개체의 키를 합산하는 사용자 지정 각도 필터를 사용할 수 있습니다.그러면 필터가 합계를 반환합니다.
.filter('sumColumn', function(){
return function(dataSet, columnToSum){
let sum = 0;
for(let i = 0; i < dataSet.length; i++){
sum += parseFloat(dataSet[i][columnToSum]) || 0;
}
return sum;
};
})
그런 다음 표에서 사용할 수 있는 열을 합산합니다.
<th>{{ dataSet | sumColumn: 'keyInObjectToSum' }}</th>
우아한 솔루션을 선호합니다.
템플릿 내
<td>Total: {{ totalSum }}</td>
컨트롤러 내
$scope.totalSum = Object.keys(cart.products).map(function(k){
return +cart.products[k].price;
}).reduce(function(a,b){ return a + b },0);
ES2015(ES6)를 사용하는 경우
$scope.totalSum = Object.keys(cart.products)
.map(k => +cart.products[k].price)
.reduce((a, b) => a + b);
angular js의 서비스를 사용해 보세요, 저는 효과가 있었습니다.아래에 코드 스니펫을 제시하다
컨트롤러 코드:
$scope.total = 0;
var aCart = new CartService();
$scope.addItemToCart = function (product) {
aCart.addCartTotal(product.Price);
};
$scope.showCart = function () {
$scope.total = aCart.getCartTotal();
};
서비스 코드:
app.service("CartService", function () {
Total = [];
Total.length = 0;
return function () {
this.addCartTotal = function (inTotal) {
Total.push( inTotal);
}
this.getCartTotal = function () {
var sum = 0;
for (var i = 0; i < Total.length; i++) {
sum += parseInt(Total[i], 10);
}
return sum;
}
};
});
다음은 이 문제에 대한 저의 해결책입니다.
<td>Total: {{ calculateTotal() }}</td>
대본
$scope.calculateVAT = function () {
return $scope.cart.products.reduce((accumulator, currentValue) => accumulator + (currentValue.price * currentValue.quantity), 0);
};
reduce는 제품 어레이 내의 각 제품에 대해 실행됩니다.누계는 총 누적량, currentValue는 어레이의 현재 요소, 마지막 0은 초기 값입니다.
이것이 나의 해결책이다.
<div ng-controller="MainCtrl as mc">
<ul>
<li ng-repeat="n in [1,2,3,4]" ng-init="mc.sum = ($first ? 0 : mc.sum) + n">{{n}}</li>
<li>sum : {{mc.sum}}</li>
</ul>
</div>
에 이름을 .Controller as SomeName변수를 캐시할 수 있습니다(정말 필요한가요?)는 $사용하는을 잘 잘 모르겠습니다.)$parent ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」
반복할 마다 ''를 붙입니다.ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"
$first 합니다. 않으면 합니다.그렇지 않으면 집약값을 계속합니다.
http://jsfiddle.net/thainayu/harcv74f/
Raja Shilpa의 답변을 조금 더 자세히 설명했습니다.다음과 같은 구문을 사용할 수 있습니다.
{{object | sumOfTwoValues:'quantity':'products.productWeight'}}
개체의 하위 개체에 액세스할 수 있습니다.필터 코드는 다음과 같습니다.
.filter('sumOfTwoValues', function () {
return function (data, key1, key2) {
if (typeof (data) === 'undefined' || typeof (key1) === 'undefined' || typeof (key2) === 'undefined') {
return 0;
}
var keyObjects1 = key1.split('.');
var keyObjects2 = key2.split('.');
var sum = 0;
for (i = 0; i < data.length; i++) {
var value1 = data[i];
var value2 = data[i];
for (j = 0; j < keyObjects1.length; j++) {
value1 = value1[keyObjects1[j]];
}
for (k = 0; k < keyObjects2.length; k++) {
value2 = value2[keyObjects2[k]];
}
sum = sum + (value1 * value2);
}
return sum;
}
});
Vaclav의 답변을 받아들여 앵귤러처럼 만드는 방법:
angular.module('myApp').filter('total', ['$parse', function ($parse) {
return function (input, property) {
var i = input instanceof Array ? input.length : 0,
p = $parse(property);
if (typeof property === 'undefined' || i === 0) {
return i;
} else if (isNaN(p(input[0]))) {
throw 'filter total can count only numeric values';
} else {
var total = 0;
while (i--)
total += p(input[i]);
return total;
}
};
}]);
이렇게 하면 중첩된 데이터와 배열 데이터에 액세스할 수 있는 이점이 있습니다.
{{data | total:'values[0].value'}}
html에서
<b class="text-primary">Total Amount: ${{ data.allTicketsTotalPrice() }}</b>
자바스크립트로
app.controller('myController', function ($http) {
var vm = this;
vm.allTicketsTotalPrice = function () {
var totalPrice = 0;
angular.forEach(vm.ticketTotalPrice, function (value, key) {
totalPrice += parseFloat(value);
});
return totalPrice.toFixed(2);
};
});
Huy Nguyen의 대답이 거의 다 왔다.동작시키려면 , 다음과 같이 추가합니다.
ng-repeat="_ in [ products ]"
...ng-init 행으로 이동합니다.목록에는 항상 하나의 항목이 있으므로 Angular는 블록을 정확히 한 번 반복합니다.
필터링을 사용한 Zybnek의 데모는 다음을 추가하여 작동시킬 수 있습니다.
ng-repeat="_ in [ [ products, search ] ]"
http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview 를 참조해 주세요.
**Angular 6: Grand Total**
**<h2 align="center">Usage Details Of {{profile$.firstName}}</h2>
<table align ="center">
<tr>
<th>Call Usage</th>
<th>Data Usage</th>
<th>SMS Usage</th>
<th>Total Bill</th>
</tr>
<tr>
<tr *ngFor="let user of bills$">
<td>{{ user.callUsage}}</td>
<td>{{ user.dataUsage }}</td>
<td>{{ user.smsUsage }}</td>
<td>{{user.callUsage *2 + user.dataUsage *1 + user.smsUsage *1}}</td>
</tr>
<tr>
<th> </th>
<th>Grand Total</th>
<th></th>
<td>{{total( bills$)}}</td>
</tr>
</table>**
**Controller:**
total(bills) {
var total = 0;
bills.forEach(element => {
total = total + (element.callUsage * 2 + element.dataUsage * 1 + element.smsUsage * 1);
});
return total;
}
저는 보통 아래와 같은 간단한 코드를 사용합니다. 계산 시 vm.myArray 목록이 'null'이 아닌지 확인하십시오.
vm.totalQuantity = 0;
$.each(vm.myArray, function (i, v) {
vm.totalQuantity += v.Quantity;
});
그룹화된 정보를 요약하는 방법을 여기 있는 모든 답을 읽은 후, 저는 모든 것을 건너뛰기로 결정하고 SQL javascript 라이브러리 중 하나를 로드했습니다.저는 alarasql을 사용하고 있습니다.네, 로딩 시간이 몇 초 더 걸리지만 코딩과 디버깅에 드는 시간이 셀 수 없이 절약됩니다.지금 그룹화와 sum()을 사용합니다.
$scope.bySchool = alasql('SELECT School, SUM(Cost) AS Cost from ? GROUP BY School',[restResults]);
이것은 angular/js에 대해 다소 호언장담처럼 들리겠지만, 실제로 SQL은 30년 이상 전에 이 문제를 해결했습니다.브라우저에서 다시 발명할 필요는 없습니다.
언급URL : https://stackoverflow.com/questions/22731145/calculating-sum-of-repeated-elements-in-angularjs-ng-repeat
'programing' 카테고리의 다른 글
| Android의 JSON - 시리얼화 (0) | 2023.02.25 |
|---|---|
| JToken의 모든 항목에 대한 액세스 (0) | 2023.02.25 |
| 카트 표시 중 배송 국가 가져오기 - WooCommerce (0) | 2023.02.25 |
| Angular 2의 $compile과 동등 (0) | 2023.02.25 |
| 도커 컨테이너에서 mongodb 쉘을 시작하는 방법은 무엇입니까? (0) | 2023.02.25 |