Question

我正在使用Angular开发购物车，在此过程中我遇到了一个关于计算的问题。

在我的场景中，我的代码类似于

<label>No. of item</label>
<div>{{totalItems}}</div> 


<div ng-repeat="cartElement in currentCartDetails.cartElements">
        <span>{{cartElement.productName}}</span>
        <span>{{cartElement.productCode}}</span>
        <span>{{cartElement.productPrice}}</span>
        <span>{{cartElement.quantity}}</span>
    </div>

我想要的，添加所有类似

的内容

 totalItems += cartElement.quantity

我知道有很多选项可以显示该值例如。使用服务器端的计算，计算中的迭代到控制器

但是我在寻找什么，当我在视图页面上迭代对象时，有任何方法可以计算并获得牵引方式绑定的好处。

Answer 1

你试过功能吗？在控制器内定义一个函数，如 calculateTotal ，然后在每次迭代时调用它。

$scope.totalItems = 0;
...
$scope.calculateTotal = function(cart){
  $scope.totalItems += cart.quantity;
}
...

然后在你的模板中

<div ng-repeat="cartElement in currentCartDetails.cartElements" ng-init="calculateTotal(cartElement)">
  <span>{{cartElement.productName}}</span>
  <span>{{cartElement.productCode}}</span>
  <span>{{cartElement.productPrice}}</span>
  <span>{{cartElement.quantity}}</span>
</div>

Answer 2

您也可以通过

实现这一目标

方法1：

HTML：

<div>{{gettotalItems(currentCartDetails.cartElements)}}</div>

JS：

$scope.gettotalItems = function(cart_data){
  var num = 0;
  for(var i=0;i<cart_data.length;i++) {
      num += cart_data[0].quantity;
  }
  return num;
}

方法2：

HTML：

<div ng-init="gettotalItems(currentCartDetails.cartElements)>{{totalItems}}</div>

JS：

$scope.gettotalItems = function(cart_data){
      var num = 0;
      for(var i=0;i<cart_data.length;i++) {
          num += cart_data[0].quantity;
      }
      $scope.totalItems = num;
    }

优点是您可以通过传递整个对象列表直接在一次调用中获取总购物车价值。而不是在迭代期间每次计数。

角度视图上的Calulation

2 个答案: