带有嵌套数组的AngularJS ng-repeat

Question

ok so i have an array menu[] and there is a nested array flavors[] within it. what i am trying to do is calculate the total price of all active items and all active flavors.. the problem i am having is total of products works fine but it does not take into account the active flavors... here is what i have thanks for looking..

first my array

 $scope.menu = [{
                     name: 'Espresso',
                     price: 27,
                     qty: 1,
                     desc: "One shot of espresso prepared with 7 grams of ground coffee in a single portafilter. The shot should be 1 ounce of liquid. You have two choices with espresso: ristretto, a very short or “restrained” shot, brewed at less than 2/3 of a demitasse, or luongo, a long pull of espresso brewed so the liquid should be more than 2/3 of a demitasse.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDc3dzNmkycEVsVHM",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Americano',
                     price: 36,
                     qty: 1,
                     desc: "A touch of hot fresh water and a double shot pulled long. This creates a nice bold, strong coffee taste. The espresso shot is pulled atop the hot water to ensure the consistency of the crema.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDWmxrMHZ3cXE2MmM",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Macchiato',
                     price: 57,
                     qty: 1,
                     desc: "Single espresso with a touch of foam. Macchiato means spotted or stained; the espresso is “stained” with foam. This can be made as a single or a double.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDdmJIWFlCVFl1Wlk",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Cappuccino',
                     price: 42,
                     qty: 1,
                     desc: "Made in thirds — 1/3 espresso, 1/3 steamed milk, 1/3 foam. This is a very traditional way of making cappuccino. The milk should appear glassy, smooth, shiny and with no visible bubbles. The milk and foam should be blended or mixed to create a thick, creamy texture. La Colombe pulls double ristretto shots.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDUG40QklKMVdNa2s",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Mocha',
                     price: 55,
                     qty: 1,
                     desc: "1/3 espresso, 1/6 cocoa, 1/3 milk, 1/6 foam. Cocoa is the first layer, and then you pull the double espresso shot. Then steam the milk to the consistency of a cafe latte. La Colombe cafe mocha is unique because they use an unsweetened chocolate. Again, this drink is pulled with a double ristretto.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDejdpVkVaRzhRUnM",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Latte',
                     price: 39,
                     qty: 1,
                     desc: "1/3 espresso, 2/3 hot milk, thin layer of foam. A cafe latte should have the same glossy finish as the cappuccino. This is pulled with a double ristretto.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDai0yRGxGdHl3S1E",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     },{
                     name: 'Chai Latte',
                     price: 50,
                     qty: 1,
                     desc: "The warm, aromatic flavors of chai tea have their roots in the ancient Ayurvedic tradition of India, where roadside tea merchants can be found preparing black tea with traditional healing spices like cardamom, cinnamon and black pepper. Featuring ingredients gathered from around the globe, our version of this beloved beverage is wonderfully sweet and spicy – and every bit as soothing.",
                     img: "https://drive.google.com/uc?id=0B53kazuFlrvDVVJXZThwLXc0aFk",
                     active: false,
                     flavors: [{name: 'Vanilla', price: 8, active: false},
                               {name: 'Almond', price: 8, active: false},
                               {name: 'Hazelnut', price: 8, active: false},
                               {name: 'Caramel', price: 8, active: false}]
                     }];

now my factory function for calculating the total

 OrderFactory.total = function(item, option){

    var total = 0;
    var itemTotal = 0;
    var optionTotal = 0;

    angular.forEach(item, function(item){
        if (item.active){
            itemTotal+= item.qty * item.price;
        }
    });
    angular.forEach(option, function(option){
        if (option.active){
            optionTotal+= option.price;
        }
    });
    total = itemTotal + optionTotal;
    return total;
};

and finally the order view html

<md-card>
<md-card-content>
    <h3 class="md-subhead" align="center">Review And Submit Order</h3>
    <md-divider></md-divider>

    <md-list ng-repeat="item in menu | filter:true">
        <md-list-item layout="row">
            <h3> {{ item.name }} </h3>
            <span flex></span>
            <h3> {{ item.price | currency}} </h3>
        </md-list-item>
        <md-list-item layout="row" ng-repeat="flavor in item.flavors | filter:true">
            <span> {{ flavor.name }} </span>
            <span flex></span>
            <span>+ {{ flavor.price | currency}} </span>
        </md-list-item>
    </md-list>
    <md-divider></md-divider>
    <md-list>
        <md-list-item layout="row">
            <h3 class="md-subhead">Order Total :</h3>
            <span flex></span>
            <h3>{{ total(menu, item.flavors) | currency}}</h3>
        </md-list-item>
    </md-list>
</md-card-content>
</md-card>

now on the bottom of the order html i need to provide two parameters for the total function the first menu does as expected and adds the totals of all active items within the menu array. however because the ng-repeat is held within the md-list tags i cannot access item.flavors array outside of these tags.. of course i can move the ng-repeat but than it ruins all the formatting and creates seperate cards for each active item.. what i need to do is find a way to access the values within item.flavors or menu.flavors so i can pass this to my total function.. i've yet to find a way... any ideas?? thanks for looking

Answer 1

It seems like you just need to change the total function. The ng-repeat is just for displaying data.

So I would just loop through the items and then loop through the flavors for each. Something like this:

OrderFactory.total = function(items) {

    var itemTotal = 0;

    angular.forEach(items, function(item) {
        var optionTotal = 0;
        if (item.active) {
            itemTotal += item.qty * item.price;
            angular.forEach(item.flavors, function(option) {
              if (option.active) {
                    optionTotal += option.price;
                }
            });
            itemTotal += optionTotal;
        }
    });

    return itemTotal;
};