我正在尝试在两个ng重复的表中显示一些数据。但第二次ng重复似乎不起作用。这就是我正在尝试的:
<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>
但是第二次重复不会超过一次,并且它不知道很多属性。
我在第一次ng-repeat中重复的一课可能如下:
{
"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"}
]}
将课程分配到范围:
$scope.$watch(function () {
return lessonsService.getLessons();
}, function (lessons) {
$scope.lessons = lessons;
});
我做错了什么?
答案 0 :(得分:1)
嘿,json结构和ng-repeat语句存在一些问题。
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"
}]
}];
});
&#13;
<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>
&#13;
这是json结构:
[{
"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"
}]
}]
&#13;
希望它能为你效劳
答案 1 :(得分:0)
您的内部ng-repeat应为 groups
,而不是 group
,
<div ng-repeat="group in lesson.groups">
<强>样本强>
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>
答案 2 :(得分:0)
因为你的行应该显示课程 - 你的第一个ng-repeat应该是tr 然后在td级别进行第二次ng-repeat。 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"
}
]
}
];
});
对于你的工作日,它应该是working_days {{lesson.day - 1}},除非你有一个不同的列表变量 查看演示:https://jsfiddle.net/sathvike/efq9djpy/