Question

我有一个简化的购物车，如下所示，每个购物车项目都有一个控制器：

<!DOCTYPE HTML>
<html ng-app="cart">
  <div ng-controller="cartCtrl">
    <table>
      <tr><th>qty</th><th>prize</th><th>total</th></tr>
      <tr ng-repeat="item in cartItems" ng-controller="cartItemCtrl">
        <td>
          <input ng-model="item.qty"/>
        </td>
        <td>
          <input ng-model="item.prize" />
        </td>
        <td>
          {{total}}
        </td>
      </tr>
     </table>
     total: {{cartTotal}}
   </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
  <script>
(function(){

var cart = angular.module('cart', []);

cart.controller('cartCtrl', ['$scope', function($scope){
  $scope.cartItems = [{},{},{},{}];
}]);

cart.controller('cartItemCtrl', ['$scope', function($scope){

  $scope.$watchCollection('item', function(){
    $scope.total = $scope.item.qty * $scope.item.prize;
  });
}]);

}());
  </script>
</html>

我无法在JSFiddle中使用它：http://jsfiddle.net/XY3n8/1/

现在我想计算购物车总数，但我不想重新计算商品总数。相反，我想重用已经计算的项目总计。怎么样？（在我的用例中，项目总计算有点复杂。）

Answer 1

您需要对集合和对象进行“深入”监视才能获得小计和总计。 $watchCollection更适合知道何时添加/删除内容。 $watch将查找现有对象的更改。

为了封装项目的总数，有几种方法可以做到这一点，但我可能会创建一个Item模型（可能是一个更好的名字）并通过factory注入它。在此示例中，它不再需要其中一个控制器，但需要您创建一个模块（无论如何这是最佳实践）

这个怎么样？

var ShoppingCart = angular.module('shoppingCart', []);

ShoppingCart.factory('Item', function() {
  function Item() {
    this.total = function() {
      return (this.qty * this.prize) || 0;
    }
  }

  return Item;
});

ShoppingCart.controller('cartCtrl', function($scope, Item) {
  $scope.cartItems = [new Item(), new Item(), new Item(), new Item()];

  $scope.$watch('cartItems', function() {
    var cartTotal = 0;

    $scope.cartItems.forEach(function(item) {
      cartTotal += item.total();
    });

    $scope.cartTotal = cartTotal;
  }, true);
});

HTML略有改动。您可以在ng-app中引用模块名称，去掉子控制器，并直接在视图中引用item.total()。

<div ng-app="shoppingCart" ng:controller="cartCtrl">
  <table>
    <tr><th>qty</th><th>prize</th><th>total</th></tr>
    <tr ng:repeat="item in cartItems">
      <td>
        <input ng:model="item.qty"/>
      </td>
      <td>
        <input ng:model="item.prize" />
      </td>
      <td>
        {{item.total()}}
      </td>
    </tr>
  </table>
  total: {{cartTotal}}
</div>

这是working codepen。

Answer 2

这是一种使用ng-init指令扩展模型并进行计算的方法。

http://www.ozkary.com/2015/06/angularjs-calculate-totals-using.html

使用角度计算重复购物车项目总计的总数

2 个答案: