AngularJS ng-repeatで繰り返し要素の合計を計算する
以下のスクリプトは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 （Thanks - 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フィドル
編集：sumProduct
これはsumProductフィルタです。引数はいくつでも使用できます。引数として、入力データからプロパティの名前を受け取り、ネストされたプロパティ（ドットでマークされたネスト：property.nested）を処理できます。
- ゼロ引数を渡すと、入力データの長さが返されます。
- 引数を1つだけ渡すと、そのプロパティの値の単純な合計が返されます。
- さらに引数を渡すと、渡されたプロパティの値の積の合計（プロパティのスカラ合計）が返されます。
これがJS Fiddleとコードです。
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フィドル
単純解
これが簡単な解決策です。追加のforループは必要ありません。
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; };
HTMLコードに{{ datas|total:calcItemTotal|currency }}を使用します。これは、ダイジェストごとに呼び出されるわけではないという利点があります。フィルターを使用し、単純合計または複雑な合計に使用できるからです。
これは、ng-repeatとng-initを使ってすべての値を集計し、item.totalプロパティでモデルを拡張する簡単な方法です。
<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ディレクティブは各アイテムのset total関数を呼び出します。コントローラのsetTotals関数は各項目の合計を計算します。また、invoiceCountおよびinvoiceTotalスコープ変数を使用して、すべての商品の数量と合計を集計（合計）します。
$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
データセットオブジェクト配列と各オブジェクトのキーを合計するカスタムAngularフィルタを使用できます。フィルタは合計を返すことができます。
.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);
これがこの問題に対する私の解決策です。
<td>Total: {{ calculateTotal() }}</td>
スクリプト
$scope.calculateVAT = function () {
return $scope.cart.products.reduce((accumulator, currentValue) => accumulator + (currentValue.price * currentValue.quantity), 0);
};
製品配列の各製品に対してreduceが実行されます。アキュムレータは合計累積額、currentValueは配列の現在の要素、最後の0は初期値です。
あなたは角度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;
}
};
});
Huy Nguyenの答えはほぼそこにあります。それを機能させるには、以下を追加してください。
ng-repeat="_ in [ products ]"
... ng-initの行へリストには常に単一の項目があるため、Angularはブロックを1回だけ繰り返します。
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;
}
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);
};
});
Vaclavの答えを取り、それをもっとAngularのようにする：
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'}}
私はRajaShilpaの答えを少し拡張しました。次のような構文を使うことができます。
{{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;
}
});