Question

我对角度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        |
|-------|-----------------------|

Answer 1

我编辑了你的json，这是无效的。你可以在js或json对象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>

Answer 2

仅使用一个带有rowspan的表来完成它是非常棘手的。你必须使用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

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

2 个答案: