Question

我需要创建一个计算所有对象的价格和数量的函数，并返回一个摘要。我的代码：

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

function MyCtrl($scope) {
    $scope.menu = {
        burgers: [
            {name: "Classic", price: 10, qty: 1},
            {name: "Mexican", price: 12, qty: 1}
        ],
        drinks: [
            {name: "Water", price: 5, qty: 1},
            {name: "Beer", price: 5, qty: 2}
        ]
    }
    $scope.calcTotal = function() {
        var total = 0;
        // return price*qty of all objects in both arrays 
        // inside menu object and sum them together
        return total;
    }
}

在模板中，我想做这样的事情：

<div>{{ calcTotal() }}</div>

我应该如何编写这个calcTotal()函数来实现这一目标？在这种情况下，它应该返回37.
提前谢谢！
还有fiddle。

Answer 1

为什么不利用reduce()函数？

只要$scope.menu仅包含数组

，此代码就会执行而不会出现错误
$scope.calcTotal = function() { var sum = 0; for (var array in $scope.menu) { sum += $scope.menu[array].reduce(function(acc, el) { return acc + el.price * el.qty }, 0); } return sum; }

JavaScript中的每个数组都实现了map()和reduce()原语，这些原语允许您将一些代码应用于数组中的每个元素（在map的情况下）或应用相同的代码到每个元素并将其传递给下一个元素，以便您可以对值求和或累加。（acc）中名为reduce的参数

我建议阅读这些（非常有用的）函数，它们是函数式编程语言的基础，对于JS reduce，您可以查看MDN doc page

最后一点，JavaScript for-in会对$scope.menu中包含的每个属性名称进行迭代，因此在这种情况下array将是名称在您的对象中，例如'burgers'和'drinks'。

Answer 2

试

$scope.calcTotal = function() {
    var total = 0;
    for(i=0 ; i < $scope.menu.burgers.length ; i++){
        total += $scope.menu.burgers[i].price * $scope.menu.burgers[i].qty
    }

    for(i=0 ; i < $scope.menu.drinks.length ; i++){
        total += $scope.menu.drinks[i].price * $scope.menu.drinks[i].qty
    }
    // return price*qty of all items in both objects 
    // inside menu object and sum them together
    return total;
}

plunker - updated Plunker

Answer 3

您需要添加如下逻辑。

 $scope.calcTotal = function() {
        var total = 0;
        var burgers = $scope.menu.burgers;
        var drinks = $scope.menu.drinks;
        for (var i = 0 ; i < burgers.length; i++) {
            total += burgers[i].price * burgers[i].qty;
        }
        for (var i = 0 ; i < drinks.length; i++) {
            total += drinks[i].price * drinks[i].qty;
        }
        return total;
    }

这是更新的plunker - http://jsfiddle.net/rnonpsLk/8/

Answer 4

您可以使用angular.forEach循环数组，如下所示：

$scope.calcTotal = function() {
    var total = 0;
    angular.forEach($scope.menu, function(value, key) {
        angular.forEach(value, function(item, type) {
            total += item.price * item.qty;
        });
    });

    return total;
}

Here's an updated fiddle

AngularJS计算总订单金额

4 个答案: