CODEWITHSUNDEEP
javascripthtmlangularjs
jagmohan
jagmohan

Reputation: 2052

Angular JS: Mix of Fixed + Dynamic columns

I have this problem at hand where I have a list of objects + a list of dates. I want to layout the rows using list of objects with each object field becoming a column in row + for each date object I want to add 4 columns after the object columns so my row would look like

<tr>
   <td>obj field 1</td>
   <td>obj field 2</td>
   <td>obj field 3</td>
   <td>obj field 4</td>
   <td>obj field 5</td>
   ... after object fields, date columns
   <td>date 1 - col 1</td>
   <td>date 1 - col 2</td>
   <td>date 1 - col 3</td>
   <td>date 1 - col 4</td>
   ...
   ...
   <td>date 2 - col 1</td>
   <td>date 2 - col 2</td>
   <td>date 2 - col 3</td>
   <td>date 2 - col 4</td>
   ... there are 12 date objects, one for each month
</tr>

Here is how I have tried to solve it

<tr ng-repeat="o in objects">
    <td></td>
    ... object fields end
   <td ng-repeat="d in dates" data-columns="true" date="d"></td>
</tr>

where data-columns is a directive which has a table as its template.

Directive template:

<table><tr><td></td><td></td><td></td><td></td></tr></table>

With this approach, I get table inside td for date objects. I want to know if there is way to do this without using table in the directive template. I want my end html to be just table rows + columns and no nested tables.

Upvotes: 0

Views: 227

Answers (1)

Sim
Sim

Reputation: 3317

You can add four columns for each date in that way:

<tr ng-repeat="o in objects">
    <td></td>
    ... object fields end
    <td ng-repeat-start="d in dates">col-1</td>
    <td>col-2</td>
    <td>col-3</td>
    <td ng-repeat-end>col-4</td>
</tr>

Upvotes: 1

Related Questions