Question

以下（所需）模板无法按预期工作（每年一个div，每个包含每个月的表格 - 传统的年度计划样式日历）：

<div ng-repeat="year in calendar | ToCalendar">
  {{year.name}}
  <table ng-repeat="month in year.children">
    <caption>{{month.name}}</caption>
    <tr>
      <th ng-repeat="d in month.children[1].children track by $index">
        {{d}}
      </th>
    </tr>
    <tr ng-repeat="week in month.children">          
      <td ng-repeat="d in week.children track by $index">
        {{d.day.format('DD')}}
      </td>
    </tr>
  </table>
</div>

外部div元素在表之前关闭（至少在chrome中），因此表上的ng-repeat没有所需的父作用域。因此，所有呈现的都是每年的div。

$ scope.calendar是一个moment.js对象的数组。自定义过滤器＆＃34; ToCalendar＆＃34;用户创建其他属性（年，月，工作日和周），允许_.nest（）按年，月和周嵌套这些属性。为了给出结构的概念，模板中有以下内容：

<pre>{{calendar | ToCalendar | json}}</pre>

以下结果呈现：

[
  {
    "name": "2014",
    "children": [
      {
        "name": "September",
        "children": [
          {
            "name": "36",
            "children": [
              null,
              {
                "year": 2014,
                "month": "September",
                "week": "36",
                "weekday": "1",
                "day": "2014-08-31T23:00:00.000Z" //Is in fact a moment() object
              }
              ...

如果我更改了所需的模板，以便表格及其子元素是带有css＆＃34; div：table＆＃34;依此类推，它可以根据需要呈现。如果我将外部div更改为span并使用ng-repeat-start（以及带有ng-repeat-end的空元素），但将表元素保持为真正的表元素，则可以正常工作。这个hacky修复可能是通过强制表元素在正确的父范围内来实现的。

似乎过滤器＆＃34; ToCalendar＆＃34;导致重复的div提前关闭，但为什么呢？为什么内部元素是否是div是否会有所不同？

JS小提琴：working fiddle。见评论。

Answer 1

问题显然存在于模板的不同部分，因为剥离回到所需的模板修复它。

ng-repeat div中的表格上的ng-repeat在自定义过滤数据上无法正常工作

1 个答案: