AngularJS在多维数组上的ng-repeat

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。我的申请表上有旅行计划。现在我想循环遍历数据并在单个表中显示每个组。这样的:

<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它们是从服务器动态加载的，这意味着可以有超过2个。

另外，每个组名实际上是数组中的一个"键"。我真不知道该怎么办才好。

编辑: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>

参见fiddle示例- http://jsfiddle.net/HB7LU/15846/