Angular JS:混合固定+动态列

Angular JS: Mix of Fixed + Dynamic columns

本文关键字:动态 JS 混合 Angular      更新时间:2023-09-26

我手头有这个问题,我有一个对象列表+日期列表。我想用对象列表来布局行每个对象字段都是row +中的一列对于每个日期对象我想在对象列之后添加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>

使用这种方法,我在日期对象的td中得到table。我想知道是否有办法做到这一点,而不用在指令模板中使用table。我希望我的结束html只是表行+列,没有嵌套的表。

您可以通过这种方式为每个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>