AngularJS：ng-repeat-如何更新使用ng-repeat创建的列表的总和？

Question

我是angularjs的新手，并试图创建一个非常简单的页面，其中显示了产品，价格，数量，小计（价格*数量）和总和。 我想要，如果用户更新数量，则小计和总金额应实时更新。 我试过了但是没办法。 尝试这样：

<body ng-app="myApp" ng-controller="myCtrl">

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Price * Quantity</th>
    </tr>
  </thead>
  <tbody ng-init="total = 0">
    <tr ng-repeat="product in products">
      <td>{{ product.name }}</td>
      <td>{{ product.price }}</td>
      <td><input value="{{ product.quantity }}"></td>
      <td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
    </tr>
    <tr>


      <td><b>Total</b></td>
      <td></td>
      <td></td>
      <td><b>${{ total }}</b></td>
    </tr>
  </tbody>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  var i = 0;
  $scope.products = [
    {
      "name": "Product 1",
      "quantity": 2,
      "price": 10
    },
    {
      "name": "Product 2",
      "quantity": 6,
      "price": 8
    },
    {
      "name": "Product 3",
      "quantity": 5,
      "price": 26
    },
    {
      "name": "Product 4",
      "quantity": 10,
      "price": 4
    },
    {
      "name": "Product 5",
      "quantity": 11,
      "price": 7
    }
    ];
});
</script>
</body>

到目前为止，这是我的完整代码： http : //plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview

提前致谢！

注意：我想以有角度的方式来完成所有这些工作，即仅在HTML中。 该数据脚本将放入.js文件

Answer 1

只需创建一个函数即可在每次更改值时计算总数

表体HTML

<tbody ng-init="total = 0">
    <tr ng-repeat="product in products">
      <td>{{ product.name }}</td>
      <td>{{ product.price }}</td>
      <td><input ng-change="updateTotal()" ng-model="product.quantity"></td>
      <td>${{ product.price * product.quantity }}</td>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td></td>
      <td><b>${{ total }}</b></td>
    </tr>
  </tbody>

并在JS中添加一个功能

$scope.updateTotal = function(){
      $scope.total = 0;
    for(product of $scope.products){
       $scope.total += product.quantity * product.price
    }
  }

Answer 2

请参阅更新的链接http://plnkr.co/edit/HOCVZC2p3xfG2apoKJDW?p=preview您没有用于计算总数的函数。 您需要添加它并在更改任何数量的文本框时调用该函数。 您还需要向所有文本框中添加一个更改事件，用于数量ng-change="updateTotal()"

$scope.updateTotal = function(){
    $scope.total = 0;
    angular.forEach($scope.products, function(product){
       $scope.total += product.quantity*product.price;
   });
};

Answer 3

具有获取总数的功能，

   $scope.getTotal = function() {
        var total = 0;
        for (var i = 0; i < $scope.products.length; i++) {
          var product = $scope.products[i];
          total += (product.price * product.quantity);
        }
        return total;
      }

数量变化时调用该函数，

<td>
 <input ng-model="product.quantity" ng-change="getTotal()">
</td>

演示

AngularJS：ng-repeat-如何更新使用ng-repeat创建的列表的总和？

问题描述

3 个解决方案

解决方案1
1 2017-08-04 05:37:52

解决方案2
1 已采纳 2017-08-04 05:42:03

解决方案3
0 2017-08-04 05:39:23

AngularJS：ng-repeat-如何更新使用ng-repeat创建的列表的总和？

问题描述

3 个解决方案

解决方案1 1 2017-08-04 05:37:52

解决方案2 1 已采纳 2017-08-04 05:42:03

解决方案3 0 2017-08-04 05:39:23

解决方案1
1 2017-08-04 05:37:52

解决方案2
1 已采纳 2017-08-04 05:42:03

解决方案3
0 2017-08-04 05:39:23