Snackoverflow
Reputation: 828
Nesting two ng-repeats
I'm trying to show some data in a table with two ng-repeats. But the second ng-repeat doesn't seem to work. This is what I'm trying:
<tbody>
<tr class="admin-detail-rows" ng-repeat="lesson in lessons | orderBy:sortType:sortReverse">
<div ng-repeat="group in lesson.groups">
<td>{{ working_days[lesson.day - 1] }}</td>
<td>{{ lesson.start_time }} - {{ lesson.end_time }}</td>
<td>{{ group.available_seats ? group.max_seats - group.available_seats : 0 }} / {{ group.max_seats }}</td>
<td>{{ lesson.room }}</td>
<td>{{ lesson.teacher }}</td>
<td>{{ group.group_name }}</td>
<td>{{ lesson.groupDetails }}</td>
<td ng-click="removeLesson(lesson)" class="delete-button">✖</td>
</div>
</tr>
</tbody>
But it never does the second repeat more than once, and it doesn't know a lot of the properties.
A lesson that I'm iterating through in the first ng-repeat could look like this:
{
"id":140,
"course_id":156,
"start_time":"08:45",
"end_time":"10:30",
"day":2,
"type":1,
"course_description":"The Business Dimension of Europe (lecture; group P:3+Q:3+R:3)",
"room":"OVk.41 left",
"teacher":"Test teacher","created_at":"2017-04-11 13:43:29",
"course": {
"id":156,
"code":"Test code",
"name":"The Business Dimension of Europe",
"credits":3,
"category_id":20,
"entry_requirements":null,
"assessment_materials":null,
"study_materials":null,
"outline":null,
"description":null,
"created_at":"2017-04-11 13:41:45"
},
"groups":[{
"id":181,"timetable_id":140,
"course_id":156,
"group_name":"P",
"group_details":null,
"max_seats":3,
"available_seats":-4,
"created_at":"2017-04-11 13:43:29"
}, {
"id":182,
"timetable_id":140,
"course_id":156,
"group_name":"Q",
"group_details":null,"max_seats":3,
"available_seats":null,
"created_at":"2017-04-11 13:43:29"
},{"id":183,
"timetable_id":140,
"course_id":156,
"group_name":"R",
"group_details":null,
"max_seats":3,"available_seats":null,
"created_at":"2017-04-11 13:43:29"}
]}
Assigning the lesson to the scope:
$scope.$watch(function () {
return lessonsService.getLessons();
}, function (lessons) {
$scope.lessons = lessons;
});
What am I doing wrong?
Upvotes: 0
Views: 62
Answers (3)
Sathvik
Reputation: 34
As your row should show lessons - your first ng-repeat should be at tr and then second ng-repeat at td level. HTML:
<div ng-app="testApp" ng-controller="testCtrl">
<table>
<thead>
<tr>
<td>working_days</td>
<td>lesson.start_time - lesson.end_time</td>
<td>group.available_seats / group.max_seats</td>
<td>lesson.room</td>
<td>lesson.teacher</td>
<td>group.group_name</td>
<td>lesson.groupDetails </td>
</tr>
</thead>
<tbody ng-repeat="lesson in lessons ">
<tr ng-repeat="group in lesson.groups">
<td >working_days {{lesson.day - 1}}</td>
<td>{{ lesson.start_time }} - {{ lesson.end_time }}</td>
<td >{{ group.available_seats }} / {{ group.max_seats }}</td>
<td>{{ lesson.room }}</td>
<td>{{ lesson.teacher }}</td>
<td>{{ group.group_name }}</td>
<td>{{ lesson.groupDetails }}</td>
<td ng-click="removeLesson(lesson)" class="delete-button">✖</td>
</tr>
</tbody>
</table>
</div>
JS:
angular.module('testApp',[]).controller('testCtrl', function($scope){
$scope.lessons =[
{
"id": 140,
"course_id": 156,
"start_time": "08:45",
"end_time": "10:30",
"day": 2,
"type": 1,
"course_description": "The Business Dimension of Europe (lecture; group P:3+Q:3+R:3)",
"room": "OVk.41 left",
"teacher": "Kerkhof van de B.K.W.",
"created_at": "2017-04-11 13:43:29",
"course": {
"id": 156,
"code": "ES-ISBMDIMEUR-16",
"name": "The Business Dimension of Europe",
"credits": 3,
"category_id": 20,
"entry_requirements": null,
"assessment_materials": null,
"study_materials": null,
"outline": null,
"description": null,
"created_at": "2017-04-11 13:41:45"
},
"groups": [
{
"id": 181,
"timetable_id": 140,
"course_id": 156,
"group_name": "P",
"group_details": null,
"max_seats": 3,
"available_seats": -4,
"created_at": "2017-04-11 13:43:29"
},
{
"id": 182,
"timetable_id": 140,
"course_id": 156,
"group_name": "Q",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
},
{
"id": 183,
"timetable_id": 140,
"course_id": 156,
"group_name": "R",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}
]
}
];
});
And for you Working days, it should be working_days {{lesson.day - 1}} unless if you have a different list variable Check the demo: https://jsfiddle.net/sathvike/efq9djpy/
Upvotes: 0
Sajeetharan
Reputation: 222582
Your inner ng-repeat should be groups instead of group,
<div ng-repeat="group in lesson.groups">
DEMO
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.lessons =[{
"id": 140,
"course_id": 156,
"start_time": "08:45",
"end_time": "10:30",
"day": 2,
"type": 1,
"course_description": "The Business Dimension of Europe (lecture; group P:3+Q:3+R:3)",
"room": "OVk.41 left",
"teacher": "Kerkhof van de B.K.W.",
"created_at": "2017-04-11 13:43:29",
"course": {
"id": 156,
"code": "ES-ISBMDIMEUR-16",
"name": "The Business Dimension of Europe",
"credits": 3,
"category_id": 20,
"entry_requirements": null,
"assessment_materials": null,
"study_materials": null,
"outline": null,
"description": null,
"created_at": "2017-04-11 13:41:45"
},
"groups": [{
"id": 181,
"timetable_id": 140,
"course_id": 156,
"group_name": "P",
"group_details": null,
"max_seats": 3,
"available_seats": -4,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 182,
"timetable_id": 140,
"course_id": 156,
"group_name": "Q",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 183,
"timetable_id": 140,
"course_id": 156,
"group_name": "R",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="lesson in lessons ">
<div ng-repeat="group in lesson.groups">
<td>{{ working_days[lesson.day - 1] }} </td>
<td>{{ lesson.start_time }} - {{ lesson.end_time }} </td>
<td>{{ group.available_seats }} / {{ group.max_seats }} </td>
<td>{{ lesson.room }} </td>
<td>{{ lesson.teacher }} </td>
<td>{{ group.group_name }} </td>
<td>{{ lesson.groupDetails }} </td>
<td ng-click="removeLesson(lesson)" class="delete-button">✖</td>
</div>
</tr>
</table>
</div>Upvotes: 0
biswajit-rout
Reputation: 377
Hey there is some issue with json structure and ng-repeat statement.
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.lessons =[{
"id": 140,
"course_id": 156,
"start_time": "08:45",
"end_time": "10:30",
"day": 2,
"type": 1,
"course_description": "The Business Dimension of Europe (lecture; group P:3+Q:3+R:3)",
"room": "OVk.41 left",
"teacher": "Kerkhof van de B.K.W.",
"created_at": "2017-04-11 13:43:29",
"course": {
"id": 156,
"code": "ES-ISBMDIMEUR-16",
"name": "The Business Dimension of Europe",
"credits": 3,
"category_id": 20,
"entry_requirements": null,
"assessment_materials": null,
"study_materials": null,
"outline": null,
"description": null,
"created_at": "2017-04-11 13:41:45"
},
"groups": [{
"id": 181,
"timetable_id": 140,
"course_id": 156,
"group_name": "P",
"group_details": null,
"max_seats": 3,
"available_seats": -4,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 182,
"timetable_id": 140,
"course_id": 156,
"group_name": "Q",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 183,
"timetable_id": 140,
"course_id": 156,
"group_name": "R",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="lesson in lessons ">
<div ng-repeat="group in lesson.groups">
<td>{{ working_days[lesson.day - 1] }} </td>
<td>{{ lesson.start_time }} - {{ lesson.end_time }} </td>
<td>{{ group.available_seats }} / {{ group.max_seats }} </td>
<td>{{ lesson.room }} </td>
<td>{{ lesson.teacher }} </td>
<td>{{ group.group_name }} </td>
<td>{{ lesson.groupDetails }} </td>
<td ng-click="removeLesson(lesson)" class="delete-button">✖</td>
</div>
</tr>
</table>
</div>here is the json structure:
[{
"id": 140,
"course_id": 156,
"start_time": "08:45",
"end_time": "10:30",
"day": 2,
"type": 1,
"course_description": "The Business Dimension of Europe (lecture; group P:3+Q:3+R:3)",
"room": "OVk.41 left",
"teacher": "Kerkhof van de B.K.W.",
"created_at": "2017-04-11 13:43:29",
"course": {
"id": 156,
"code": "ES-ISBMDIMEUR-16",
"name": "The Business Dimension of Europe",
"credits": 3,
"category_id": 20,
"entry_requirements": null,
"assessment_materials": null,
"study_materials": null,
"outline": null,
"description": null,
"created_at": "2017-04-11 13:41:45"
},
"groups": [{
"id": 181,
"timetable_id": 140,
"course_id": 156,
"group_name": "P",
"group_details": null,
"max_seats": 3,
"available_seats": -4,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 182,
"timetable_id": 140,
"course_id": 156,
"group_name": "Q",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}, {
"id": 183,
"timetable_id": 140,
"course_id": 156,
"group_name": "R",
"group_details": null,
"max_seats": 3,
"available_seats": null,
"created_at": "2017-04-11 13:43:29"
}]
}]Hope it will work for you thanks
Upvotes: 1
Related Questions
- AngularJs - Nested ng-repeat
- angularjs how to nest ng-repeat
- AngularJS multiple nested ng-repeats
- ng-repeat within ng-repeat in angular
- Angularjs - How to work with nested ng-repeat
- Creating nested ng-repeats in Angular
- Ng-repeat inside ng-repeat
- Inner ng-repeat inside ng-repeat
- Angularjs ng-repeat inside another ng-repeat
- nesting ng-repeat in Angularjs