AngularJS - 故障與NG-重複

這裏是我的工作數據：AngularJS - 故障與NG-重複

$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後循環顯示圖形卡？看起來我需要兩個陳述，但這將如何工作？

我該怎麼做呢？

來源

2015-06-17 Drew

你可以提供jsfiddle或plunkr嗎？ – Grundy

如果你喜歡嵌套表，你可以嵌套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-重複使用該函數的結果。

另一種選擇是有多個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-重複啓動和HG-repeat-隱藏這樣結束

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

來源

2015-06-17 14:02:39 n00b

感謝您的幫助。這會給我W541 AP測試1W541 AP測試2在我的裏面，當我真的需要爲每個驅動程序一個全新的錶行。 – Drew

好吧，你想要嵌套表還是僅僅在父表中的行？ – n00b

@Braim，從以上評論：_new table row_ – Grundy

您需要另一個NG-重複，通過每個gfx循環。

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

來源

2015-06-17 14:03:54 Blenderer

假設所選應用程序通過綁定{{ selectedApplication }}（$範圍暗示）設置，那麼你的NG-重複應該是這樣的：

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

這意味着你可以談論的驅動程序內部選定的應用程序對象。

來源

2015-06-17 14:04:34

AngularJS - 故障與NG-重複

回答

相關問題