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>

<强> DEMO

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

3 个答案: