Question

我有一个嵌套数组列表，我想为每个unit获得一个不同的表行。

JSON：

[
   {
      "id":1,
      "units":[
         {
            "id":1,
            "name":"Test 1",
         },
         {
            "id":2,
            "name":"Test 2"
         }
      ]
   }
]

因此Test 1和Test 2应位于不同的表格行中。

HTML：

<tr ng-repeat="user in users">
    <td><p ng-repeat="unit in user.units">{{unit.name}}</p></td>
</tr>

上面的代码有效，但我在同一行中收到了unit个名字。

我试过了：

<tr ng-repeat="unit in users.units">
    <td>{{unit.name}}</td>
</tr>

但这并不奏效。任何帮助将不胜感激！

Answer 1

这是一个不会要求对您的数据进行任何更改的解决方案，尽管它可能不是最干净的解决方案。另一个选项（我不打算写）是修改数据并将数据展平为包含所有单位的单个数组或对象。

我假设您希望您的DOM（包括<table>）理想情况如下：

<table>
  <tr>
    <td><p>Test 1</p></td>
  </tr>
  <tr>
    <td><p>Test 2</p></td>
  </tr>
</table>

这里的问题是没有任何代表＆＃34;用户＆＃34;第一次ng重复的一部分（此数据结构需要2 ng重复）。据我所知，如果不创建一个DOM元素（至少是一个临时元素）就无法启动ng-repeat，所以我们可以创建一些有效的html（<caption> s在这种情况下）并使用一次性绑定ng-if将角度排除在外。

<div ng-controller="MyCtrl">
    <table>
        <!-- The ng-if here will remove the <caption> from the end result. It's just a placeholder for the users repeater. -->
        <caption ng-repeat-start="user in users" ng-if="::false"></caption>
        <tr ng-repeat="unit in user.units">
            <td><p>{{unit.name}}</p></td>
        </tr>
        <caption ng-repeat-end ng-if="::false"></caption>
    </table>
</div>

每个单元不同的行

1 个答案: