AngularJS рассчитать общую сумму заказа

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

попробовать

$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 2

Вам нужно добавить логику следующим образом.

$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 3

Вы можете использовать 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.

Answer 4

Почему бы не использовать функцию 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'.