AngularJS 中 DataTable 的多个（两个）ng-repeats

Question

现在我知道这是一个非常常见的话题，但到目前为止我还没有从我看到的 SO 问题中得到任何解决方案。我目前正在处理一个具有 DataTable 的页面，其数据来自 控制器 并使用 ng-repeat。但是，这里的情况是我必须在 table.

上使用两个 ng-repeat

JSON如下：

{
  "mainData": [
    {
    "goal": "ValueOne",
    "array": [
      {
        "LowerKeyOne": "LowerValueOne",
        "LowerKeyTwo": "LowerValueOne",
        "LowerKeyThree": "LowerValueOne"
      },
      {
        "LowerKeyOne": "LowerValueTwo",
        "LowerKeyTwo": "LowerValueTwo",
        "LowerKeyThree": "LowerValueTwo"
      }
    ]
  },
 {
    "goal": "ValueTwo",
    "array": [
      {
        "LowerKeyOne": "LowerValueThree",
        "LowerKeyTwo": "LowerValueThree",
        "LowerKeyThree": "LowerValueThree"
      },
      {
        "LowerKeyOne": "LowerValueFour",
        "LowerKeyTwo": "LowerValueFour",
        "LowerKeyThree": "LowerValueFour"
      }
    ]
  }
  ]
}

HTML如下：

<div class="ibox-content table-responsive">
    <div ng-repeat="data in mainData">
        <div ng-repeat="cond in data.array">
            <table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">
            <thead>
                <tr class="table-tr-th">
                    <th>Header</th>
                    <th>Other Header</th>
                    <th>Another Header</th>
                    <th>Extra Header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{data.goal}}</td>
                    <td>{{cond.LowerKeyOne}}</td>
                    <td>{{cond.LowerKeyTwo}}</td>
                    <td>{{cond.LowerKeyThree}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</div>

我使用了许多不同的选项，例如 -

在<tbody>

ng-repeat="(key, value) in JSONObject" ng-if="key=='mainData'"

两个 ng-repeat，一个在 <tbody> 中，一个在 <tr> 之后 <tbody>
在 <table> 之前添加 <div> 标签，并尝试在 <tbody> 之前添加（在 <tbody> 之前，正如其中一个 SO 答案中所建议的那样同一主题）

最后一个选项导致我出现以下错误 -

Error: Expected expression in form of "item in collection[ track by id]" but got "{0}"

也尝试使用 limitTo:1 过滤器，但没有成功。

欢迎任何有帮助的评论。谢谢！

Answer 1

你需要这样的东西吗？

JSFiddle demo

<table ng-repeat="data in data.mainData | limitTo: 1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Other header</th>
      <th>Another header</th>
      <th>Extra header</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in data.mainData track by @index">
    <tr ng-repeat="d in data.array">
      <td>{{data.goal}}</td>
      <td>{{d.LowerKeyOne}}</td>
      <td>{{d.LowerKeyTwo}}</td>
      <td>{{d.LowerKeyThree}}</td>
    </tr>
  </tbody>
</table>

包括您需要的具体部分请您评论和回答。

Answer 2

@Mistalis 的回答几乎是正确的，但就我而言，我必须进行一些更改才能获得解决方案，因此发布了这个答案。

解决方案是 -

<table ng-repeat="data in data.mainData | limitTo: 1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Other header</th>
      <th>Another header</th>
      <th>Extra header</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in data.mainData track by @index">
    <tr ng-repeat="d in data.array">
      <td>{{data.goal}}</td>
      <td>{{d.LowerKeyOne}}</td>
      <td>{{d.LowerKeyTwo}}</td>
      <td>{{d.LowerKeyThree}}</td>
    </tr>
  </tbody>
</table>

还不确定为什么要写 ng-repeat="data in mainData" 两次。

AngularJS 中 DataTable 的多个（两个）ng-repeats

Multiple (Two) ng-repeats on DataTable in AngularJS

angularjs

angularjs-ng-repeat

angular-datatables

JSFiddle demo