Question

现在我知道这是一个非常常见的话题，但我从现在看到的SO问题中找不到任何解决方案。我目前正在处理一个页面，其DataTable的数据来自控制器并使用ng-repeat。但是，这里的情况是我必须在表格中使用两个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>

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

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

<tbody>

两个ng-repeat个，<tbody>中的一个<tr>之后<tbody>中的一个<{1}}
在<div>之前添加<table>代码，并尝试在<tbody>之前添加（在<tbody>之前添加，因为在同一主题的一个SO答案中建议）

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

错误：集合中的“ item ”形式的预期表达式通过 id ]“但得到了”{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重复

2 个答案:

JSFiddle demo