Question

我需要打印一个按类别排序的产品列表，我在Angular的json中收到这些产品。

我拥有的json是：

{
    "MAIN MENU ": [{
        "id_prod": "1",
        "name_prod": "Artisanal chicken nuggets with mustard sauce",
        "descrip_prod": null,
        "price": "22.00",
        "category": "1"
    }],
    "EXPRESS MENU ": [{
        "id_prod": "8",
        "name_prod": "Guacamole with nachos",
        "descrip_prod": null,
        "price": "22.00",
        "category": "2"
    }],
    "LUNCH": [{
        "id_prod": "7",
        "name_prod": "Gazpacho",
        "descrip_prod": null,
        "price": "2.50",
        "category": "3"
    }],
    "PLATTERS": [],
    "BIRTHDAYS": [],
    "COFFEE BREAKS": [{
        "id_prod": "2",
        "name_prod": "Fresh Orange juice",
        "descrip_prod": null,
        "price": "2.00",
        "category": "6"
    }, {
        "id_prod": "9",
        "name_prod": "Coffee",
        "descrip_prod": null,
        "price": "1.50",
        "category": "6"
    }],
    "ASSORTED MINI PASTRIES": [{
        "id_prod": "3",
        "name_prod": "Assorted mini pastries ",
        "descrip_prod": null,
        "price": "1.60",
        "category": "7"
    }],
    "DRINKS": [{
        "id_prod": "5",
        "name_prod": "Sparkling water 50 cl",
        "descrip_prod": null,
        "price": "2.50",
        "category": "8"
    }],
    "IBERICOS": [{
        "id_prod": "6",
        "name_prod": "Chorizo ib\u00e9rico ",
        "descrip_prod": null,
        "price": "12.00",
        "category": "9"
    }],
    "OTHER": [{
        "id_prod": "4",
        "name_prod": "Mini croissant with ham and cheese",
        "descrip_prod": null,
        "price": "1.20",
        "category": "10"
    }]
}

我需要在我的视图中打印此数据，标题为类别名称（饮料，主菜单......），然后是该类别的产品列表。

这是我在连接数据库之前制作的HTML示例：

<div class="cateringColumn cateringColumn-Product">
                <div class="cateringTitle">
                    <p>Coffee Breaks</p>
                </div>
                <p>Coffee</p>
                <p>Tea</p>
                <p>Cola Cao</p>
                <p>Fresh Orange Juice</p>
                <div class="cateringTitle">
                    <p>Assorted Mini Pastries</p>
                </div>
                <p>Assorted mini pastries (2 units per person)</p>
                <p>Assorted mini pastries (5 units per person)</p>
                <div class="cateringTitle">
                    <p>Other</p>
                </div>
                <p>Mini croissant with ham and cheese</p>
                <p>Yoghourt</p>
                <p>Fruit (1 piece or portion)</p>
 </div>
 <div class="cateringColumn cateringColumn-Prize">
                <div class="cateringTitle"><p>&nbsp;</p></div>
                <p>1.50€</p>
                <p>1.50€</p>
                <p>1.50€</p>
                <p>2.00€</p>
                <div class="cateringTitle"><p>&nbsp;</p></div>
                <p>1.60€</p>
                <p>4.00€</p>
                <div class="cateringTitle"><p>&nbsp;</p></div>
                <p>1.20€</p>
                <p>1.05€</p>
                <p>1.50€</p>
 </div>

Answer 1

假设您的json存储在名为data的变量中，您必须执行以下操作：

<div class="cateringColumn cateringColumn-Prize" ng-repeat="(key, item) in data">
       <div class="cateringTitle">
            <p>{{key}}</p>
        </div>
        <p ng-repeat="subItem in item">{{subItem.name_prod}}</p>
</div>

Answer 2

使用ng-repeat和orderBy过滤器。的 DEMO

<body ng-app="app"> <div ng-controller="ctrl"> Menu Items <table border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> <tr ng-repeat="menu in items['MAIN MENU '] | orderBy: menu.category"> <td>{{ menu.id_prod }}</td> <td>{{ menu.name_prod }}</td> <td>{{ menu.descrip_prod }}</td> <td>{{ menu.price }}</td> </tr> </tbody> </table> </div> </body>

从AngularJS中的json按类别打印

2 个答案: