current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to load a table dynamically from a json, but I have a problem to go through two lists before the tag <th> and <td>.

In the example below I am using the just to simulate what I would do.

Json

"Tables": [
{
  "ID": "1",
  "Title": "Table 1",
  "Rows": [
    {
      "ID": "1",
      "Title": "Row 1",
      "Columns": [
        {
          "ID": "1",
          "Title": "Column 1",
          "Type": "RADIO",
          "SubColumns": [
            {
              "ID": "1",
              "Title": "A",
              "Value": ""
            }
          ]
        }
      ]
    }
  ]
}]

HTML

<div data-ng-repeat="table in Tables">
    <table class="table table-condensed">
        <thead>
            <tr>
                <th rowspan="2" style="vertical-align: middle; width: 30%">
                    {{table.Title}}
                </th>
                <span data-ng-repeat="column in table.Rows[0].Columns">
                    <th colspan="column.SubColumns.length" style="text-align: center">
                        {{column.Title}}
                    </th>
                </span>
            </tr>
            <tr>
                <span data-ng-repeat="column in table.Rows[0].Columns">
                    <th data-ng-repeat="subColumn in column.SubColumns">
                        {{subColumn.Title}}
                    </th>
                </span>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="row in table.Rows">
                <td>
                    {{row.Title}}
                </td>

                <span data-ng-repeat="column in row.Columns">
                    <span data-ng-if="column.Type == 'TEXT'">
                        <td>
                            <input type="text" />
                        </td>
                    </span>
                    <span data-ng-if="column.Type == 'RADIO'">
                        <td data-ng-repeat="subColumn in column.SubColumns">
                            <input type="radio" />
                        </td>
                    </span>
                    <span data-ng-if="column.Type == 'CHECKBOX'">
                        <td data-ng-repeat="subColumn in column.SubColumns">
                            <input type="checkbox" />
                        </td>
                    </span>
                </span>
            </tr>
        </tbody>
    </table>
</div>

Does anyone have any idea to solve this problem?

Thank's

share|improve this question
    
Why do you use spans? They're invalid inside a tr. Put the ng-repeat directly on the th or the td. Put the ng-if inside the th or the td. –  JB Nizet Aug 26 '14 at 21:11
    
I used the span only simulate the idea I wanted to do. –  Renato Vianna Aug 27 '14 at 14:41

2 Answers 2

up vote 0 down vote accepted

At this point, I don't believe ng-repeat supports iterating over nested arrays with a single directive.

The only way I've been able to solve this is to flatten out the nested arrays first.

<table>
  <thead>
    <tr>
      <th ng-repeat="column in data[0].Rows[0].Columns" colspan="{{column.SubColumns.length}}">
        {{column.Title}}
      </th>
    </tr>
    <tr>
      <th ng-repeat="subcol in flattenedSubcols()">
        {{subcol.Title}}
      </th>
    </tr> 
  </thead>
  <tbody>
    <tr data-ng-repeat="row in data[0].Rows">
      <td data-ng-repeat="data in flattenedRowData(row)">{{data}}</td>
    </tr>
  </tbody>
</table>

Flattening functions

  $rootScope.flattenedSubcols = function() {
    var subcolumns = [];
    $rootScope.data[0].Rows[0].Columns.forEach(function(col) {
      col.SubColumns.forEach(function(subcol) {
        subcolumns.push(subcol);
      });
    });
    return subcolumns; 
  };


  $rootScope.flattenedRowData = function(row) {
    var data = [];
    row.Columns.forEach(function(col) {
      col.SubColumns.forEach(function(subcol) {
        data.push(subcol.Value);
      });
    });
    return data;
  };

This feels a bit hacky, but it does the job

Plunker http://plnkr.co/edit/HLCYkkSBfR95jd6PoutW

share|improve this answer
    
Great! Solved my problem. Thank you very much! –  Renato Vianna Aug 27 '14 at 12:59
up vote 0 down vote

Instead of calling the iterator of columns like this:

column in table.Rows[0].Columns

Try this way:

column in table.Rows[$index].Columns
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.