angularjs - 使用 ng-repeat 如何从嵌套的 JSON 对象中检索数据

Question

在这里，我想使用 Angular ng-repeat 从嵌套的 JSON 对象中检索我的子文档数组数据

这是我的 JSON 嵌套对象:

[
    {
        _id: "5693bc169f5d75301ff5999d",
        booking: 
        [
            {
            can_name: "Kinley",
            can_quantity: "5",
            can_cost: "200",
            delivery_date: "12-01-2016",
            delivery_timeslot: "3pm-8pm",
            order_id: "18214",
            address: "140,Bajanai koil street, Melmanagar,Poonamallee,Chennai",
            _id: "5694926fd6227ee408b9d051",
            ordered_at: "2016-01-12T05:43:11.076Z",
            status: "UnderProcess"
            }
        ]
    },
    {
        _id: "5693baf07fe08c6012034b13",
        booking: 
        [
            {
            can_name: "Kinley",
            can_quantity: "4",
            can_cost: "160",
            delivery_date: "12-01-2016",
            delivery_timeslot: "3pm-8pm",
            order_id: "14426",
            address: "154,Pilliayar koil street,Poonamallee,Chennai",
            _id: "569491fad6227ee408b9d04f",
            ordered_at: "2016-01-12T05:41:14.531Z",
            status: "UnderProcess"
            },

            {
            can_name: "Bisleri",
            can_quantity: "5",
            can_cost: "250",
            delivery_date: "12-01-2016",
            delivery_timeslot: "3pm-8pm",
            order_id: "11391",
            address: "154,Pilliayar koil street,Poonamallee,Chennai",
            _id: "5694923ad6227ee408b9d050",
            ordered_at: "2016-01-12T05:42:18.900Z",
            status: "UnderProcess"
            }
        ]
    }
]

Angular Controller 代码:

$http.get('/auth/booking-date/' + id).success(function(response){
            $scope.todaylist = response;
            console.log(response);
            $scope.today = '';
        });

在这里，我如何使用 ng-repeat 来检索每个子文档数据。

这是我尝试过的，但无法获取所有数据:

<div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Address</th>
                    <th>Can Name</th>
                    <th>Can Quantity</th>
                    <th>Can Cost</th>
                    <th>Timeslot</th>
                    <th>Delivery Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="today in todaylist">
                    <td>{{today._id}}</td>
                    <td>{{today.booking[0].address}}</td>
                    <td>{{today.booking[0].can_name}}</td>
                    <td>{{today.booking[0].can_quantity}}</td>
                    <td>{{today.booking[0].can_cost}}</td>
                    <td>{{today.booking[0].delivery_timeslot}}</td>
                    <td>{{today.booking[0].delivery_date | date:'dd-MM-yyyy'}}</td>
                </tr>
            </tbody>
        </table>
    </div>

帮助将不胜感激...

见上文，我发布了我的 JSON 数据而不是链接

Answer 1

我不确定，但请检查这是否解决了您的问题:

<tr ng-repeat="today in todaylist">
    <div ng-repeat="bookingObj in today.booking">
        <td>{{today._id}}</td>
        <td>{{bookingObj.address}}</td>
        <td>{{bookingObj.can_name}}</td>
        <td>{{bookingObj.can_quantity}}</td>
        <td>{{bookingObj.can_cost}}</td>
        <td>{{bookingObj.delivery_timeslot}}</td>
        <td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
    </div>
</tr>

我只是在这里直接应用我的逻辑。尝试这个:

<tbody ng-repeat="today in todaylist">
    <tr ng-repeat="bookingObj in today.booking">
        <td>{{today._id}}</td>
        <td>{{bookingObj.address}}</td>
        <td>{{bookingObj.can_name}}</td>
        <td>{{bookingObj.can_quantity}}</td>
        <td>{{bookingObj.can_cost}}</td>
        <td>{{bookingObj.delivery_timeslot}}</td>
        <td>{{bookingObj.delivery_date | date:'dd-MM-yyyy'}}</td>
    </tr>
</tbody>

另外，尝试删除此行，我猜是因为此行将替换今天的当前内容，因此不会显示任何数据:

$scope.today = '';