Angularjs使用json數據創建表格Ng-Repeat

我對角度js非常陌生。我的任務是從Web服務的JSON數據創建一個html表。Angularjs使用json數據創建表格Ng-Repeat

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  | 
|-------|-----------------------|

來源

2014-12-25 Sindhu Vinodhini

這不是一個有效的對象或JSON –

讓我們瞭解您已經嘗試和你遇到了 – charlietfl

A·B的Json編輯的問題。請看看這個。 –

我編輯了自己的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>

來源

2014-12-25 12:16:09

@SindhuVinodhini你可以接受它作爲回答:) –

這是相當棘手的，只需用行跨度單獨的表做。你必須使用ng-repeat-start/end。我也用$首先跳過嵌套重複的第一行。

<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

來源

2014-12-25 12:54:06

Angularjs使用json數據創建表格Ng-Repeat

回答

相關問題