Multiple levels in ng-repeat-start not working
Question
I want to use ng-repeat-start to build a table looking like this:
I have a JSON like this:
[
{
"name": "Chapter 1",
"parts": [
{
"text": "Lorem ipsum... 1",
"subparts": []
},
{
"text": "Lorem ipsum... 2",
"subparts": []
}
]
},
{
"name": "Chapter 2",
"parts": [
{
"text": "Lorem ipsum... 1",
"subparts": []
}
]
},
{
"name": "Chapter 3",
"parts": [
{
"text": "Lorem ipsum... 1",
"subparts": [
"Sub 1",
"Sub 2"
]
}
]
}
]
and my table looks like this:
<table>
<tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
<td>
{{chapter_index + 1}}
</td>
<td colspan="2">
{{chapter.name}}
</td>
</tr>
<tr ng-repeat-end ng-repeat-start="(part_index, part) in chapter.parts">
<td>
{{chapter_index + 1}}.{{part_index + 1}}
</td>
<td colspan="2">
{{part.text}}
</td>
</tr>
<tr ng-repeat-end ng-repeat-start="(subpart_index, subpart) in part.subparts"">
<td></td>
<td>
{{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
</td>
<td>
{{subpart}}
</td>
</tr>
<tr ng-repeat-end ng-hide="true"></tr>
</table>
My problem is that the third level (subparts) does not show:
Any idea how to solve this?
2 answers
solution1
0 2018-09-17 13:29:58
You just need to filter them by chapters (using groupBy from angular.filter module) and then use a lot of nested ng-repeat to get to other sub-categories. I'm not sure what's the best approach at numbering them, but you can try to use {{$index}} for that.
Here is a simple demo without a table formatting:
var app = angular.module('myApp', ['angular.filter']); app.controller('myCtrl', function($scope) { $scope.chapters = [{ "name": "Chapter 1", "parts": [{ "text": "Lorem ipsum... 1", "subparts": [] }, { "text": "Lorem ipsum... 2", "subparts": [] } ] }, { "name": "Chapter 2", "parts": [{ "text": "Lorem ipsum... 1", "subparts": [] }] }, { "name": "Chapter 3", "parts": [{ "text": "Lorem ipsum... 1", "subparts": [ "Sub 1", "Sub 2" ] }] } ]; });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="(key, value) in chapters | groupBy: 'name'"> {{ key }} <br> <div ng-repeat="v in value"> <div ng-repeat="part in v.parts"> {{part.text}} <div ng-repeat="subpart in part.subparts"> {{subpart}} </div> </div> <hr> </div> </div> </div> </body> </html>
solution2
0 ACCPTED 2018-09-17 13:50:29
Found the answer myself. I removed the ng-repeat-end from <tr ...> :s and added two more <tr ng-repeat-end ng-hide="true"></tr> in the bottom
<table>
<tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
<td class="integrity-chapter-number integrity-chapter-title">
{{chapter_index + 1}}
</td>
<td class="integrity-chapter-title" colspan="2">
{{chapter.name}}
</td>
</tr>
<tr ng-repeat-start="(part_index, part) in chapter.parts">
<td class="integrity-chapter-number integrity-chapter-text">
<span ng-if="chapter.parts.length > 1">{{chapter_index + 1}}.{{part_index + 1}}</span>
</td>
<td class="integrity-chapter-text" colspan="2">
{{part.text}}
</td>
</tr>
<tr ng-repeat-start="(subpart_index, subpart) in part.subparts"">
<td class="integrity-chapter-text"></td>
<td class="integrity-chapter-number integrity-chapter-text">
{{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
</td>
<td class="integrity-chapter-text">
{{subpart}}
</td>
</tr>
<tr ng-repeat-end ng-hide="true"></tr>
<tr ng-repeat-end ng-hide="true"></tr>
<tr ng-repeat-end ng-hide="true"></tr>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.