計算總價值動態的角度

我的產品清單作爲JSON對象計算總價值動態的角度

[ 
    { 
    "id": 22565423428, 
    "title": "SV 8GB USB Flash Memory E100", 
    "imageUrl": "/images/22565423428.png", 
    "url": "/products/22565423428", 
    "prices": [ 
     { 
     "amount": 159.92, 
     "currency": "SEK" 
     } 
    ] 
    }, 
    { 
    "id": 22565423394, 
    "title": "Litware Wireless Mouse M35", 
    "imageUrl": "/images/22565423394.png", 
    "url": "/products/22565423394", 
    "prices": [ 
     { 
     "amount": 239.6, 
     "currency": "SEK" 
     } 
    ] 
    } 
]

，這是我的NG-重複代碼，當用戶更改數量

<ul> 
<li class="basket-item" ng-repeat="product in products"> 
    <div class="product-item-image"> 
    <img src={{product.imageUrl}} /> 
    </div> 
    <div class="product-item-description"> 
     <h2><a href="product.html">{{product.title}}</a></h2> 
     <a href="#">Description</a> 
    </div> 
    <div class="product-item-qtn"> 
     <input type="number" name=quantity ng-model="quantity" ng-init="quantity = 0"> st 
     <p><b>quantiy</b>1-3</p> 
    </div> 
    <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p> 
    <p class="product-item-total" >{{product.prices[0].amount * quantity}}</p> 
    </li> 
</ul>

總量是可變的。

有什麼方法可以動態地獲得所有產品的總金額？

<span>{{totalAmount}}</span>

來源

2016-11-24 shinta

我掀起了一個基於您的代碼的快速示例。

兩件事情：

使用product.quantity而不是僅僅quantity。
查看控制器功能calcTotal()來計算總量。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Products</title> 
 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 

 
<div ng-controller="MyCtrl"> 
 

 
    <ul> 
 
     <li class="basket-item" ng-repeat="product in products"> 
 
      <div class="product-item-image"> 
 
       <img src={{product.imageUrl}} /> 
 
      </div> 
 
      <div class="product-item-description"> 
 
       <h2><a href="product.html">{{product.title}}</a></h2> 
 
       <a href="#">Description</a> 
 
      </div> 
 
      <div class="product-item-qtn"> 
 
       <input type="number" name=quantity ng-model="product.quantity" ng-init="product.quantity = 0"> st 
 
       <p><b>quantiy</b>1-3</p> 
 
      </div> 
 
      <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p> 
 
      <p class="product-item-total" >{{product.prices[0].amount * product.quantity}}</p> 
 
     </li> 
 
    </ul> 
 

 
    <h1>Total: {{calcTotal()}}</h1> 
 

 
</div> 
 

 
<script> 
 
    var app = angular.module('myApp',[]); 
 

 
    app.controller('MyCtrl', ['$scope', function($scope) { 
 
     $scope.products= [ 
 
      { 
 
       "id": 22565423428, 
 
       "title": "SV 8GB USB Flash Memory E100", 
 
       "imageUrl": "/images/22565423428.png", 
 
       "url": "/products/22565423428", 
 
       "prices": [ 
 
        { 
 
         "amount": 159.92, 
 
         "currency": "SEK" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "id": 22565423394, 
 
       "title": "Litware Wireless Mouse M35", 
 
       "imageUrl": "/images/22565423394.png", 
 
       "url": "/products/22565423394", 
 
       "prices": [ 
 
        { 
 
         "amount": 239.6, 
 
         "currency": "SEK" 
 
        } 
 
       ] 
 
      } 
 
     ]; 
 

 
     $scope.calcTotal= function(){ 
 
      $scope.total = $scope.products.reduce(function(totalCost, product) { 
 
       return totalCost + product.quantity*product.prices[0].amount; 
 
      }, 0); 
 
      return $scope.total; 
 
     } 
 
    }]); 
 

 
</script> 
 
</body> 
 
</html>

來源

2016-11-24 04:13:13 Toddsden

謝謝您的回答。它確實節省了我 – shinta

到控制器添加功能，例如totalPrices()，將總結你的每一個產品的價格。您也可以將quantity分別替換爲每種產品，這樣可以在計算總量時使用它。然後總計算，你可以這樣做：

$scope.totalPrices = function(){ 
    var sum = 0; 
    angular.forEach($scope.products, function(product){ 
     sum += product.prices[0].amount*product.quantity; 
    }); 
    return sum; 
    }

如果你添加更多的項目價格數組，你需要另一個嵌套for循環的每個項目只要注意。下面是改變HTML與添加控制器和修改質量是如何工作的：

<body ng-app="app"> 
    <div ng-controller="ctrl"> 
     <ul> 
     <li class="basket-item" ng-repeat="product in products"> 
     <div class="product-item-description"> 
      <h2><a href="product.html">{{product.title}}</a></h2> 
      <a href="#">Description</a> 
     </div> 
     <div class="product-item-qtn"> 
      <input type="number" name=quantity ng-model="product.quantity"> st 
      <p><b>quantiy</b>1-3</p> 
     </div> 
     <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p> 
     <p class="product-item-total" >{{product.prices[0].amount * product.quantity}}</p> 
     </li> 
     <p>{{totalPrices()}}</p> 
     </ul>  
    </div> 
    </body>

Here is a Plunker Example

來源

2016-11-24 04:18:32

謝謝:)你的代碼也在工作 – shinta

你可以做這樣的事情，

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Products</title> 
 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 

 
<div ng-controller="MyCtrl"> 
 

 
    <ul> 
 
     <li class="basket-item" ng-repeat="product in products"> 
 
      <div class="product-item-image"> 
 
       <img src={{product.imageUrl}} /> 
 
      </div> 
 
      <div class="product-item-description"> 
 
       <h2><a href="product.html">{{product.title}}</a></h2> 
 
       <a href="#">Description</a> 
 
      </div> 
 
      <div class="product-item-qtn"> 
 
       <input type="number" name=quantity ng-model="product.quantity" ng-init="product.quantity = 0"> st 
 
       <p><b>quantiy</b>1-3</p> 
 
      </div> 
 
      <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p> 
 
      <p class="product-item-total" >{{total[$index]=product.prices[0].amount * product.quantity}}</p> 
 
     </li> 
 
    </ul> 
 

 
    <h1>Total: {{getTotal()}}</h1> 
 

 
</div> 
 

 
<script> 
 
    var app = angular.module('myApp',[]); 
 

 
    app.controller('MyCtrl', ['$scope', function($scope) { 
 
     $scope.products= [ 
 
      { 
 
       "id": 22565423428, 
 
       "title": "SV 8GB USB Flash Memory E100", 
 
       "imageUrl": "/images/22565423428.png", 
 
       "url": "/products/22565423428", 
 
       "prices": [ 
 
        { 
 
         "amount": 159.92, 
 
         "currency": "SEK" 
 
        } 
 
       ] 
 
      }, 
 
      { 
 
       "id": 22565423394, 
 
       "title": "Litware Wireless Mouse M35", 
 
       "imageUrl": "/images/22565423394.png", 
 
       "url": "/products/22565423394", 
 
       "prices": [ 
 
        { 
 
         "amount": 239.6, 
 
         "currency": "SEK" 
 
        } 
 
       ] 
 
      } 
 
     ]; 
 

 
     
 
     $scope.total=[]; 
 
     
 
     $scope.getTotal=function(){ 
 
     \t $scope.totalled=0; 
 
     \t for(var i=0;i<$scope.total.length;i++){ 
 
     \t \t $scope.totalled=$scope.totalled+$scope.total[i]; 
 
     \t } 
 
     \t return $scope.totalled; 
 
     } 
 
    }]); 
 

 
</script> 
 
</body> 
 
</html>

你可以直接在html部分分配每個項目的總數，然後用js部分進行總計算如下圖所示的變化，

在HTML：

`{{total[$index]=product.prices[0].amount * product.quantity}}`

在JS：

$scope.total=[]; 

     $scope.getTotal=function(){ 
      $scope.totalled=0; 
      for(var i=0;i<$scope.total.length;i++){ 
       $scope.totalled=$scope.totalled+$scope.total[i]; 
      } 
      return $scope.totalled; 
     }

來源

2016-11-24 04:46:45 GraveyardQueen

計算總價值動態的角度

回答

相關問題