How to use ng-repeat for array in array using single ng-repeat

Question

I got a json of table which has columns and rows as below

$scope.table = {
  Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
         , {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
         , {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
 , Rows:[{Items:[{Value:1},{Value:5},{Value:8},{Value:""}]}
       ,{Items:[{Value:2},{Value:6},{Value:9},{Value:""}]}
       ,{Items:[{Value:3},{Value:7},{Value:10},{Value:15}]}]
 } //end of table

I want to display Columns.SubHeaders as Sub header row of a table.

Here what I tried, but did not work

  <table class="table table-stripped table-bordered">
        <thead>
            <tr>
                <th ng-repeat="col in table.Columns" colspan="{{col.SubHeaders.length}}">{{col.Header}}</th>
            </tr>
            <tr>
               <td class="center text-black" ng-repeat="head in table.Columns[0].SubHeaders">{{head}}</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in table.Rows">
                <td ng-repeat="item in row.Items">
                    {{item.Value}}
                </td>
            </tr>
        </tbody>
    </table>

I used head in table.Columns[0].SubHeaders just to show it is working for hard-coded index value.

How can I achieve this using single ng-repeat? I can use two ng-repeats but it will lead to unnecessary html markup.

Here is the complete fiddle

Yes, that markup won't work... One thing, your table data (3 columns for each item) doesn't match the column layout (4 columns taking subheaders as the actual columns). How do you plan to match them? — Alex Pollan
– Alex Pollan, Commented Nov 3, 2015 at 10:34
yes, I created it for demo purpose. I have proper columns in my actual data — kiran
– kiran, Commented Nov 3, 2015 at 10:45
@JayantPatil, I already tried this, but it works for single sub-header item. there can be multiple sub-headers — kiran
– kiran, Commented Nov 3, 2015 at 12:40

Alex Pollan · Accepted Answer · 2015-11-03 12:13:03Z

1

I created this fiddler (forked from yours):

https://jsfiddle.net/b50hvzef/1/

The idea is to join the subheaders as they are they actual columns:

<td class="center text-black" ng-repeat="head in subHeaders">{{head}}</td>

and the code looks like this:

var app = angular.module("app",[]);
app.controller("MyController", function ($scope, $http) {
$scope.table = {
  Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
         , {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
         , {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
 ,Rows:[{Items:[{Value:1},{Value:5},{Value:8}]}
       ,{Items:[{Value:2},{Value:6},{Value:9}]}
       ,{Items:[{Value:3},{Value:7},{Value:10}]}]
    };
var subHeaders = [];
$scope.table.Columns.forEach(function(col) { 
    col.SubHeaders.forEach(function(subHeader) {
        subHeaders.push(subHeader);
    }); 
});
$scope.subHeaders = subHeaders;

});

Note that there is still a mismatch between columns and data. But it's up to you how to solve it.

Hope this helps.

answered Nov 3, 2015 at 12:13

Alex Pollan

8735 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kiran Over a year ago

Thanks @Alex, It's perfect now. I could add subHeaders to my table object so it save my time to do it for each table.

Collectives™ on Stack Overflow

How to use ng-repeat for array in array using single ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related