Angularjs 使用 json 数据创建表 Ng-Repeat答案

【问题标题】：Angularjs Create Table Ng-Repeat with json dataAngularjs 使用 json 数据创建表 Ng-Repeat
【发布时间】：2015-02-23 03:55:46
【问题描述】：

我对 Angular js 很陌生。我的任务是从 Web 服务的 JSON 数据创建一个 html 表。

JSON 数据如下：

[{"StartTime":"07:00","Name":"xxxxxxxx","Slots":["07:00","07:15"]},{"StartTime":"07:30","Name":"xxxxxxxx","Slots":["07:30"]}]

槽长度会告诉我们要合并多少行。

表格应该是这样的：

*-------------------------------*
| Time  |  Name                 |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx           |
|-------|                       |
| 07:15 |                       |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx        |
|-------|-----------------------|

【问题讨论】：

这不是一个有效的对象或 json
向我们展示您的尝试和遇到的问题
A.B Json 已编辑。请看一下。
@SindhuVinodhini 是的，我也编辑过，请参阅答案 :)
@SindhuVinodhini StackOverflow 旨在解决您的疑问，请发布您尝试过的内容以及您遇到的问题。

标签： angularjs json html-table angularjs-ng-repeat

【解决方案1】：

我已经编辑了你的 json，这是无效的。可以在js或者json object valiadator中看到

工作演示：

angular.module('testApp',[]).controller('testCtrl', function($scope) {
  $scope.items=[
{"StartTime":"07:00","Name":"xxxxxxxx","Slots":["07:00","07:15"]},
{"StartTime":"07:30","Name":"xxxxxxxx","Slots":["07:30"]}];
  });

div.col {
  background:pink; 
  border-bottom:1px dotted black;
  padding:2px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
   <table border="2">
      <tr>
         <td>Time</td>
         <td>Name</td>
      </tr>
      <tr ng-repeat="item in items">
         <td >
             <div class="col" ng-repeat="i in item.Slots"> {{i}}</div>
         </td>
          <td >{{item.Name}}</td>
       </tr>
 </table>

【讨论】：

【解决方案2】：

仅用一个带有行跨度的表来做这件事是相当棘手的。您必须使用 ng-repeat-start/end。我还使用 $first 跳过了嵌套重复的第一行。

<table border="1">
  <thead>
    <tr>
      <th>Time</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="item in array">
      <td>{{item.Slots[0]}}</td>
      <td rowspan="{{item.Slots.length}}">{{item.Name}}</td>
    </tr>
    <tr ng-repeat="slot in item.Slots" ng-if="!$first" ng-repeat-end>
      <td>{{slot}}</td>
    </tr>
  </tbody>
</table>

td {
    vertical-align: top;
}

http://plnkr.co/edit/FsjCt2un618tVEBsGk7N?p=preview

【讨论】：