嵌套两个ng重复

时间:2017-06-08 11:37:15

标签: angularjs angularjs-ng-repeat

我正在尝试在两个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;
});

我做错了什么?

3 个答案:

答案 0 :(得分:1)

嘿,json结构和ng-repeat语句存在一些问题。

&#13;
&#13;
 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] }} &nbsp;&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.start_time }} - {{ lesson.end_time }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ group.available_seats  }} / {{ group.max_seats }}&nbsp;&nbsp;</td>
           <td>{{ lesson.room }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.teacher }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ group.group_name }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.groupDetails  }}&nbsp;&nbsp;&nbsp;</td>
           <td ng-click="removeLesson(lesson)" class="delete-button">✖</td>
      </div>
   </tr>
</table>
</div>
&#13;
&#13;
&#13;

这是json结构:

&#13;
&#13;
[{
	"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;
&#13;
&#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] }} &nbsp;&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.start_time }} - {{ lesson.end_time }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ group.available_seats  }} / {{ group.max_seats }}&nbsp;&nbsp;</td>
           <td>{{ lesson.room }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.teacher }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ group.group_name }}&nbsp;&nbsp;&nbsp;</td>
           <td>{{ lesson.groupDetails  }}&nbsp;&nbsp;&nbsp;</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/