Angularjs 使用角坐标计算重复购物车项目总计_Angularjs_Angularjs Scope_Angularjs Ng Repeat

Angularjs 使用角坐标计算重复购物车项目总计

angularjs

Angularjs 使用角坐标计算重复购物车项目总计,angularjs,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我有一个简化的购物车，如下所示，每个购物车项目都有一个控制器： <!DOCTYPE HTML> <html ng-app="cart"> <div ng-controller="cartCtrl"> <table> <tr><th>qty</th><th>prize</th><th>total</th></tr> &l

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

<!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>


数量总计
{{total}}
总计：{{cartTotal}
（功能（）{
var cart=angular.module（'cart'，[]）；
控制器（'cartCtrl'，['$scope'，函数（$scope）{
$scope.cartItems=[{}，{}，{}，{}]；
}]);
cart.controller（'cartItemCtrl'，['$scope'，函数（$scope）{
$scope.$watchCollection（'item'，function（）{
$scope.total=$scope.item.qty*$scope.item.prize；
});
}]);
}());

我无法让它在JSFIDLE中工作：

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

您需要对集合和对象进行“深入”观察，以获得小计和总数<代码>$watchCollection更适合于了解何时添加/删除内容<代码>$watch将查找现有对象中的更改

为了封装项目的总数，有几种方法可以做到这一点，但我可能会创建一个

项目

模型（可能更好的名称），并通过

工厂

注入它。它不再需要本例中的一个控制器，但需要您创建一个模块（这是最佳实践）

这个怎么样

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应用程序中引用模块名称，去掉子控制器，并直接在视图中引用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>


数量总计
{{item.total（）}}
总计：{{cartTotal}

这是一种使用ng init指令扩展模型并进行计算的方法
感谢您抽出时间回复。但我可能没有把我的问题说清楚：我只搜索了一次包含数量*奖金计算的解决方案。正如我所说，我的实际计算更复杂，我不想多次编写计算函数。明白了。我没听清楚。有几种方法，但我倾向于使用total函数创建一个模型“类”，并通过角度工厂注入它。我已经更新了我的示例来说明它是如何做到这一点的。