AngularJS

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，你可以嵌套 table。

<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>

如果你想要单个反规范化 table，一个选择是创建一个执行反规范化的函数，然后在正常的 hg-repeat 中使用该函数的结果。

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

<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 }} 的绑定设置的（隐含的范围），那么您的 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 有问题

AngularJS - Trouble with ng-repeat

javascript

ng-repeat