Question

以下是我正在使用的数据：

$scope.products = [
{
  'id': 643,
  'name': 'Product Name',
  'applications': [
    {
      'id': 100,
      'name': 'Adobe After Effects CC (2014)',
      'gfx': [
        {
          'id': 514,
          'name': 'Graphics AE Test 1'
        }
      ]
    },
    {
      'id': 101,
      'name': 'Adobe Premiere Pro CC (2014)',
      'gfx': [
        {
          'id': 514,
          'name': 'Graphics AP Test 1'
        },
        {
          'id': 512,
          'name': 'Graphics AP Test 2'
        }
      ]
    }
  ]
 }
];

我想要做的是遍历特定应用程序的所有显卡。您可以通过下拉列表选择应用程序，并在变量{{ scope.selectedApplication }}中选择所选应用程序。所以，这就是我所尝试的：

<tr data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index">
    <td>{{ driver.gfx[$index].name }}</td>
</tr>

所以这有点起作用，而不是我想要的。过滤器将其过滤到正确的应用程序，工作正常。我遇到的问题是driver.gfx[$index].name只显示第一个结果。由于我在循环应用程序而不是gfx，$index对我来说不起作用。

如何在初始ng-repeat后循环显卡？看起来我需要两个陈述，但那会怎样呢？

我是以错误的方式解决这个问题吗？

Answer 1

如果你想拥有一个嵌套表，你可以嵌套hg-repeat。

<tr data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index">
    <td>  
       <table>
        <tr ng-repeat="item in driver.gfx">
          <td >
            {{item.name}}
          <td/>
       </tr>
       </table>
   </td>
</tr>

如果你想要单个非规范化表，一个选项是创建一个执行非规范化的函数，然后在普通的hg-repeat中使用该函数的结果。

另一种选择是拥有多个tbody。所以你的外部循环发生在行上的tbody和内部循环

<tbody data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index">
        <tr ng-repeat="item in driver.gfx">
          <td >
            {{item.name}}
          <td/>
       </tr>
</tbody>

最后你可以有一些行可以将它们设置为分隔符，或者只是通过CSS隐藏它们并像这样使用ng-repeat-start和hg-repeat-end

<table>
<tr class="separator" data-ng-repeat-start="driver in result.applications | filter: { name: selectedApplication } track by $index"><td></td></tr>

        <tr ng-repeat="item in driver.gfx">
          <td >
            {{item.name}}
          <td/>
       </tr>

<tr class="seperator" ng-repeat-end><td></td></tr>
</table>

Answer 2

你需要另一个循环遍历每个gfx的ng-repeat。

<td>
<ul>
  <li ng-repeat="gfx in driver.gfx">{{ gfx.name }}</li>
</ul>
</td>

Answer 3

假设所选应用程序是通过{{ selectedApplication }}的绑定设置的（隐含了$ scope），那么你的ng-repeat应该如下所示：

<tr data-ng-repeat="driver in selectedApplication | filter: { name: selectedApplication } track by $index">
    <td>{{ driver.gfx[$index].name }}</td>
</tr>

这意味着您将在所选应用程序对象中讨论驱动程序。

AngularJS - ng-repeat问题

3 个答案: