Question

您好我的服务器返回了以下JSON：

{
    "travelSchedules":{
        "VIP":[
            {"id":1,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Mon","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":3,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Wed","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":5,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Thu","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":7,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Fri","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":9,"travel_company_id":1,"travel_route_id":3,"class":"VIP","fare":300,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Sat","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null}
        ],
        "VVIP":[
            {"id":2,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Mon","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":4,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Wed","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:14","updated_at":"2015-07-23 15:46:14","deleted_at":null},
            {"id":6,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Thu","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":8,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Fri","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null},
            {"id":10,"travel_company_id":1,"travel_route_id":3,"class":"VVIP","fare":450,"reporting_time":"09:00:00","departure_time":"09:15:00","weekday":"Sat","end_date":"2015-07-24","is_active":1,"created_at":"2015-07-23 15:46:15","updated_at":"2015-07-23 15:46:15","deleted_at":null}
        ]
    }
}

我在我的应用程序中分配给$ scope.travelSchedules。现在我想循环遍历数据并在一个表中显示每个组。像这样：

<div ng-repeat="group in groups">
  <h1>VIP</h1>
    <table>
      <tr ng-repeat="row in VIP">
        ...
      </tr>
  </table>
</div>

<div ng-repeat="group in groups">
  <h1>VVIP</h1>
    <table>
      <tr ng-repeat="row in VIP">
        ...
      </tr>
  </table>
</div>

请注意，我所指的群组是：VIP，VVIP 它们是从服务器动态加载的，这意味着可以有超过这两个。

此外，每个组名实际上都是数组中的“键”。我不知道该怎么回事。

编辑： VIP 和 VVIP 只是占位符，我发布的代码实际上只是为了展示我想要实现的目标，我的数组我的问题是如何在循环中显示名称'VIP和'VVIP'作为每个表的标题？

Answer 1

由于travelSchedules是一个对象，因此您需要键值对来迭代它。密钥将是VIP或VVIP或json返回的任何内容，其值将对应array。现在，您需要迭代该数组以绘制数据。您需要将html更新为以下

<div ng-repeat="(key, value) in travelSchedules">
    <h1>{{key}}</h1>
    <table>
      <tr ng-repeat="row in value">
        ...
      </tr>
    </table>
</div>

供参考 - http://plnkr.co/edit/nou8baooWz6cG1UjZXPT?p=preview

Answer 2

在ng-repeat中，你可以像这样访问密钥：

<tr ng-repeat="(key, value) in data">
    <th>{{ key }}</th>
    <td>{{ value}}</td>
</tr>

Answer 3

像这样 -

<div ng-controller="MyCtrl">
<div ng-repeat="(key, val) in travelSchedules">
     <h1>{{key}}</h1>
        <table ng-repeat="group in val">
            <tr ng-repeat="row in group"><td>{{row}}</td></tr>
        </table>
  </div>
</div>

例如，请参阅小提琴 - http://jsfiddle.net/HB7LU/15846/

在AngularJS中对多维数组进行ng-repeat

3 个答案: