ng-repeat-start 中的多个级别不起作用

Question

我想用 ng-repeat-start 构建一个 table 看起来像这样：

我有一个 JSON 这样的：

[
  {
    "name": "Chapter 1",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": []
      },
      {
        "text": "Lorem ipsum... 2",
        "subparts": []
      }
    ]
  },
  {
    "name": "Chapter 2",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": []
      }
    ]
  },
  {
    "name": "Chapter 3",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": [
          "Sub 1",
          "Sub 2"
        ]
      }
    ]
  }
]

我的 table 看起来像这样：

  <table>
    <tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
      <td>
        {{chapter_index + 1}}
      </td>
      <td colspan="2">
        {{chapter.name}}
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat-start="(part_index, part) in chapter.parts">
      <td>
        {{chapter_index + 1}}.{{part_index + 1}}
      </td>
      <td colspan="2">
        {{part.text}}
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat-start="(subpart_index, subpart) in part.subparts"">
      <td></td>
      <td>
        {{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
      </td>
      <td>
        {{subpart}}
      </td>
    </tr>
    <tr ng-repeat-end ng-hide="true"></tr>
  </table>

我的问题是第三层（subparts）没有显示：

知道如何解决这个问题吗？

Answer 1

您只需要按章节过滤它们（使用 angular.filter 模块中的 groupBy，然后使用大量嵌套的 ng-repeat进入其他子类别。我不确定对它们进行编号的最佳方法是什么，但您可以尝试使用 {{$index}}。

这是一个没有 table 格式的简单演示：

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
  $scope.chapters = [{
      "name": "Chapter 1",
      "parts": [{
          "text": "Lorem ipsum... 1",
          "subparts": []
        },
        {
          "text": "Lorem ipsum... 2",
          "subparts": []
        }
      ]
    },
    {
      "name": "Chapter 2",
      "parts": [{
        "text": "Lorem ipsum... 1",
        "subparts": []
      }]
    },
    {
      "name": "Chapter 3",
      "parts": [{
        "text": "Lorem ipsum... 1",
        "subparts": [
          "Sub 1",
          "Sub 2"
        ]
      }]
    }
  ];
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div ng-repeat="(key, value) in chapters | groupBy: 'name'">
      {{ key }}
      <br>
      <div ng-repeat="v in value">
        <div ng-repeat="part in v.parts">
          {{part.text}}
          <div ng-repeat="subpart in part.subparts">
            {{subpart}}
          </div>
        </div>
        <hr>
      </div>
    </div>

  </div>

</body>

</html>

Answer 2

自己找到了答案。我从 <tr ...>:s 中删除了 ng-repeat-end 并在底部添加了两个 <tr ng-repeat-end ng-hide="true"></tr>

    <table>
      <tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
        <td class="integrity-chapter-number integrity-chapter-title">
          {{chapter_index + 1}}
        </td>
        <td class="integrity-chapter-title" colspan="2">
          {{chapter.name}}
        </td>
      </tr>
      <tr ng-repeat-start="(part_index, part) in chapter.parts">
        <td  class="integrity-chapter-number integrity-chapter-text">
          <span ng-if="chapter.parts.length > 1">{{chapter_index + 1}}.{{part_index + 1}}</span>
        </td>
        <td class="integrity-chapter-text" colspan="2">
          {{part.text}}
        </td>
      </tr>
      <tr ng-repeat-start="(subpart_index, subpart) in part.subparts"">
        <td class="integrity-chapter-text"></td>
        <td class="integrity-chapter-number integrity-chapter-text">
          {{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
        </td>
        <td class="integrity-chapter-text">
          {{subpart}}
        </td>
      </tr>
      <tr ng-repeat-end ng-hide="true"></tr>
      <tr ng-repeat-end ng-hide="true"></tr>
      <tr ng-repeat-end ng-hide="true"></tr>
    </table>

ng-repeat-start 中的多个级别不起作用

Multiple levels in ng-repeat-start not working

html

javascript

json

angularjs

angularjs-ng-repeat