带有嵌套数组的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;
};