작업중인 데이터는 다음과 같습니다.
$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 후 그래픽 카드를 어떻게 반복 할 수 있습니까? 두 개의 진술이 필요한 것 같지만 어떻게 작동합니까?
내가 잘못된 방향으로 가고 있습니까?
중첩 테이블을 원하면 중첩 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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다