Angular JS:固定+动态列的混合

时间:2015-09-18 10:27:35

标签: javascript html angularjs

我手头有这个问题,我有一个对象列表+一个日期列表。我想使用对象列表来布局行,每个对象字段成为行+中的列+每个日期对象我想在对象列之后添加4列,所以我的行看起来像

<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>

以下是我试图解决的问题

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

其中data-columns是一个以table为模板的指令。

指令模板:

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

使用这种方法,我在table内得到td日期对象。我想知道是否有办法在指令模板中不使用table的情况下执行此操作。我希望我的结束html只是表格行+列而没有嵌套表格。

1 个答案:

答案 0 :(得分:1)

您可以通过这种方式为每个date添加四列:

<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>