Repeat more than one row in your table

This article describes how to repeat two rows for one item using the angular directive, ng-repeat-start:

The easiest way to create a table in Canvas is to use the angular directive ng-repeat. In a table, ng-repeat is going to repeat one row or one column per items. If you do not have lots of space in your dashboard showing too much information in one row might look a bit too squashed:

To make some room in your table, instead of showing everything in one row, you could create two rows per product, one with the alias and a second row with the year and months values:

Instead of using ng-repeat=”product in lists.products” which creates one row for each product with:

• One column for Product description.
• One column for Year value.
• One column per months.

<tr ng-repeat="product in lists.products" ng-hide="selections.zeroSuppress && product.yearTotal=='0'">    <td>             {{product["Description"]}}    </td>    <td style="font-weight:bold">        <tm1-ui-dbr             tm1-instance="dev"             tm1-cube="Retail"             tm1-elements="{{selections.version}},{{selections.year}},year,local,{{selections.region}},{{product.key}},{{selections.measure}}"            tm1-data-decimal="0"             ng-model="product.yearTotal">        </tm1-ui-dbr>    </td>    <td ng-repeat="period in lists.periods">        <tm1-ui-dbr             tm1-instance="dev"             tm1-cube="Retail"             tm1-elements="{{selections.version}},{{selections.year}},{{period.key}},local,{{selections.region}},{{product.key}},{{selections.measure}}"            tm1-data-decimal="0">        </tm1-ui-dbr>    </td></tr>

We are going to use the Angular directives ng-repeat-start and ng-repeat-end. This is how our HTML structure will look like:

<tr ng-repeat-start="product in lists.products">    <td>    </td></tr><tr ng-repeat-end>    <td>    </td></tr>

The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it’s defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

In our example we use ng-repeat-start to create a first row with the product description and a small chart.

We actually created only one data column <td>, and we made this column the same size as the 13 columns of our table by using a <td> attribute, colspan=”13″: 

<tr ng-repeat-start="product in lists.products" ng-hide="selections.zeroSuppress && product.yearTotal=='0'">    <td class="padding-left" colspan="13" style="background-color:#E5E5E5">        <div class="pull-right" style="width:15%">            <tm1-ui-chart                 tm1-chart-type="discreteBar"                 tm1-data-decimal="0" tm1-hide-controls="true" tm1-height="20" tm1-margin="{top:2,bottom:2,left:2, right:2}"                tm1-legend="none" tm1-color-scheme='["#05668D", "#028090" ,"#00A896"]' tm1-axis-label-y=""                tm1-state="{{product.yearTotal}}" tm1-axis-label-x="">                <tm1-ui-chart-dbr                     ng-repeat="month2 in lists.periods" tm1-label="{{month2.alias}}"                     tm1-instance="dev" tm1-cube="Retail"                     tm1-elements="{{selections.version}},{{selections.year}},{{month2.key}},local,{{selections.region}},{{product.key}},{{selections.measure}}">                </tm1-ui-chart-dbr>            </tm1-ui-chart>        </div>        <div style="width:85%;font-weight:bold">             {{product["Description"]}}         </div>    </td></tr>

Even if {{product[“Description”]}} is on the left of the chart, it is good practice to put the chart first, because the chart determine the height of that section. We use the Bootstrap class pull-right to push the chart to the right:

Now, we use ng-repeat-end to create the second row which shows the Year and the months values:

<tr ng-repeat-end ng-hide="selections.zeroSuppress && product.yearTotal=='0'" style="border-top:none!important;border-bottom:none!important">    <td style="font-weight:bold">        <tm1-ui-dbr             tm1-instance="dev"             tm1-cube="Retail"             tm1-elements="{{selections.version}},{{selections.year}},year,local,{{selections.region}},{{product.key}},{{selections.measure}}"            tm1-data-decimal="0"             ng-model="product.yearTotal"></tm1-ui-dbr>    </td>    <td ng-repeat="period in lists.periods">        <tm1-ui-dbr             tm1-instance="dev"             tm1-cube="Retail"             tm1-elements="{{selections.version}},{{selections.year}},{{period.key}},local,{{selections.region}},{{product.key}},{{selections.measure}}"            tm1-data-decimal="0">        </tm1-ui-dbr>    </td></tr>

This is how your table will look like:

You can use the Angular directive ng-repeat-start with any HTML components, more information can be found in the AngularJS website.