Question

我刚开始使用AngularJS。我需要从AngularJS的书中升级这个购物车示例，以便在页面底部显示所有（items.price * item.quantity）的总和。推荐的方法是什么？

<HTML ng-app>
    <head>
        <script src="js/angular.min.js"></script>
        <script>
            function CartController($scope) {
                $scope.items = [{
                    title: 'Paint pots',
                    quantity: 8,
                    price: 3.95
                },
                {
                    title: 'Pebbles',
                    quantity: 5,
                    price: 6.95
                }];

                $scope.remove = function(index) {
                    $scope.items.splice(index, 1);
                }
            }
        </script>
    </head>
    <body ng-controller='CartController'>
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input ng-model='item.quantity'>
            <span>{{item.price}}</span>
            <span>{{item.price * item.quantity}}</span>
            <button ng-click="remove($index)">Remove</button>
        </div>
    </body>
</html>

谢谢！

Answer 1

这是plunker：

创建一个迭代所有项目的函数：

$scope.sum = function(){
  return $scope.items.reduce(function(p,item){
    return p + (item.quantity * item.price)
  },0)
}

标记：

<span>Sum : {{ sum() }}</span>

详细了解reduce method

Answer 2

我认为这将是'总和'filter的良好候选人。编写和过滤器的好处是它是通用的，您可以在应用程序的任何位置使用它。

最简单的实现将输入一个对象数组和一个字符串参数作为输入，该参数是每个要求和的对象的属性。

angular.module('app')
       .filter('sum', function () {
           return function (input, propertyToSum) {
               var sum = 0;
               angular.forEach(input, function (value, key) {
                   sum = sum + value [propertyToSum];
               }
               return sum;
           }
       });

然后像这样使用它：

<span>Sum: {{ items | sum:'price' }}</span>

这里的语法不是100％。在小提琴手中构建它，让我知道它是否没有通过。

这里有许多假设，包括测试和应该涵盖的内容。但那是基本的想法。

你也可以使用像underscore这样的实用程序库和这个过滤器，它可以对集合提供大量有用的操作。

Answer 3

使用项目集上的监视功能在作用域上拥有总属性：

$scope.total = 0;

$scope.$watch( 'items', updateTotal, true );

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

在视图中：

<p>Total {{total}}</p>

总结Controller中包含的所有项目

3 个答案: