How to make two columns to repeat one item in a list?

Question

Is angular repetition possible to achieve this? Basically, I wonder if there is a way to combine 2 together? Read any help!

Controller:

$scope.date=[ {ID:1,Date:'2016-11-12'}, {ID:2,Date:'2016-11-15'}, {ID:3,Date:'2016-12-06'} ] 

HTML:

 <table border="1" align="center"> <tr> <th rowspan="2">ITEMCODE</th> <th rowspan="2">DEBTORCODE</th> <th colspan="2" ng-repeat="d in date">{{d.Date}}</th> </tr> <tr> <th>Bal</th> <th>Order</th> </tr> </table> 

And I want the Bal and Order column to be repeated side by side under each date column.

Answer 1

You can use ng-repeat-start and ng-repeat-end, which were introduced in Angular 1.2

 <th ng-repeat-start="d in date">Bal</th> <th ng-repeat-end>Order</th> 

Working example https://jsfiddle.net/9ve3fu0m/

Answer 2

You can accomplish this using a nested table as follows:

 <table border="1" align="center"> <tr> <th rowspan="2">ITEMCODE</th> <th rowspan="2">DEBTORCODE</th> <th colspan="2" ng-repeat="d in date"> <table border="1" > <tr> <th colspan="2">{{d.Date}}</th> </tr> <tr> <th>Bal</th> <th>Order</th> </tr> </table> </th> </tr> </table> 

Answer 3

You can use ng-repeat-start and ng-repeat-end

 <table border="1" align="center"> <tr> <th rowspan="2">ITEMCODE</th> <th rowspan="2">DEBTORCODE</th> <th colspan="2" ng-repeat="d in date">{{d.Date}}</th> </tr> <tr> <th ng-repeat-start="d in date">Bal</th> <th ng-repeat-end>Order</th> </tr>