javascript - 如何使用 ng-repeat 计算总计

Question

我有包含商品、数量和价格的表格。我能够根据数量变化更新每一行的价格。

但现在我想添加所有价格并显示总数。我确实写了一个总函数，但没有帮助。

查看

<table class="table">
    <thead>
        <th>Items</th>
        <th>Description</th> 
        <th>Quantity</th>

        <th>Price</th>
    </thead>
    <tbody ng-repeat="item in items">

    <td><img ng-src={{item.ImageUrl}} title="{{item.Name}}" 
             class="img-thumbnail" height="100" width="100" ><br/>
        {{item.Name}}
    </td>
    <td>{{item.Description}}</td>
    <td><input type="number" min="0" max="{{item.Quantity}}" ng-model="currentQuantity"/></td>
    <td ng-model="currentPrice">{{item.Price*currentQuantity}}</td>
    </tbody>
    <tfoot>
        <tr>
            <td/>
            <td/>
            <td>Total</td>       
            <td>{{Total()}}</td>
        </tr>
    </tfoot>
</table>

模型和 Controller :

(function() {
  var app = angular.module("FoodItems", []);

  var serviceUrl = "http://localhost/MkitechenService/Api/FoodItems";

  var MainController = function($scope, $http) {


  $scope.currentQuantity=1;
   $scope.currentPrice=0;

  $scope.Total = function()
  {
      currentPrice +=currentPrice;
      return 100;
  };

var onItemsLoaded = function(response) {
  console.log(response.data);
  $scope.items = response.data;

};

var onError = function(reason) {
  console.log(reason.message);

};

$http.get(serviceUrl).then(onItemsLoaded, onError);


  };


  app.controller("MainController", MainController);

}());

Answer 1

ng-repeat 创建自己的作用域，并且

ng-model="currentQuantity"

将属性 currentQuantity 添加到此范围，因此您无法在此范围之外获取它。

但是你可以把它保存在item中，就用

ng-model="item.currentQuantity"

之后，在 Total 函数中，你应该遍历项目集合，然后对 item.currentQuantity 求和，就像这样

$scope.Total = function()
{
    return $scope.items.reduce(function(total,item){
        return total + (item.currentQuantity*item.Price || 0);//for case when this filed not filled
    },0);
};