[解決済み] AngularJSのng-repeatで繰り返される要素の合計を計算する
2022-11-02 14:56:32
質問
以下のスクリプトは、ショップカートを
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;
}
関連
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] AngularJSのng-repeatは、空のリストのケースを処理します。
-
angularjs統合ueditor入門
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】typeerrorは、未定義のプロパティ'data'を読み取ることができません。
-
[解決済み] ajaxリクエスト時にAngularjsのローディング画面が表示される。
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
[解決済み] ディレクティブ '...' が要求するコントローラ 'ngModel' が見つかりません。
-
angularjs が src で指定されたコンテンツを iframe 内で正しく表示しない
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] angularJSの::の意味するところ
-
[解決済み] Angular JSによるシンプルなポップアップ
-
[解決済み] angular.serviceとangular.factoryの比較
-
[解決済み] 入力フィールドにフォーカスを当てるには?