帶有嵌套數組的AngularJS ng-repeat

Question

好的，所以我有一個數組menu []，里面有一個嵌套的數組flavors []。 我想做的是計算所有活性成分和所有活性調味料的總價格..我所遇到的問題是產品總計能正常工作，但沒有考慮活性調味料...這就是我所擁有的謝謝你看..

首先我的數組

 $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}]
                     }];

現在我的工廠函數用於計算總數

 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;
};

最后是訂單視圖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>

現在，在html順序的底部，我需要為total函數提供兩個參數，第一個菜單按預期進行，並將菜單數組中所有活動項的總數相加。 但是，因為ng-repeat保留在md-list標簽內，所以我無法訪問這些標簽之外的item.flavors數組。.當然，我可以移動ng-repeat，但它破壞了所有格式並為每個活動對象創建了單獨的卡片我需要做的是找到一種方法來訪問item.flavors或menu.flavors中的值，這樣我就可以將其傳遞給我的全部函數了。我還沒有找到一種方法...有什么想法嗎？ 感謝您的關注

Answer 1

似乎您只需要更改全部功能即可。 ng-repeat僅用於顯示數據。

所以我只需要遍歷所有項目，然后遍歷每種風味。 像這樣：

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;
};