Сериализованные выпадающие списки

Question

Я борюсь с задачей сериализации выпадающих списков. Я создаю приложение, которое позволяет вам заказывать товары, а затем просматривать их. Таким образом, каждый заказ имеет список назначенных предметов. Я использую AngularJS 1.6.9. Это HTML-страница:

<div ng-app="ShowOrdersApp" ng-controller="mainCtrl" class="container">
            <br><br>
            <button ng-click="getOrders()"> Show Orders </button>
            <br><br>
            <table>
                <tr>
                    <th > Orders </th>
                </tr>
                <tr ng-repeat="x in orderlist">

                    <td><label> No. {{x.id}} </label><br>
                        <label> Date and Time : {{x.timestamp}} </label><br>
                        <button class="btn btn-primary dropdown-toggle" ng-click="getOrderDetails(x.id)"> List of Items
                        <span class="caret"></span></button><br>


                    </td>

                </tr>
            </table>

</div> 

При нажатии на синюю кнопку я хочу, чтобы на ней отображались все элементы, назначенные для определенного заказа, но у меня возникают проблемы при создании раскрывающегося списка, поскольку количество заказов может отличаться, а также может изменяться количество элементов для каждого заказа. Как мне заставить это работать?

Answer 1

Итак, правильно ли я понял - вы хотите показать items из List of items в выпадающем списке? Попробуйте с этим: HTML:

<table>
                    <tr>
                        <th > Orders </th>
                    </tr>
                    <tr ng-repeat="x in data">

                        <td><label> No. {{x.id}} </label><br>
                            <label> Date and Time : {{x.date}} </label><br>
                            <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-click="getOrderDetails(x.id)"> List of Items
                            <span class="caret"></span></button><br>
                             <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" ng-repeat="item in x">
                               <a class="dropdown-item" style="display: block" ng-repeat="y in item">{{y.name}}</a>
                            </div></div>
                        </td>

                    </tr>
                </table>

Плункер: http://plnkr.co/edit/LZ8TF0MumSGPOXqFAkLm?p=preview