[英]Ng-click and ng-show AngularJS
I have a list of dictionaries, and I want to toggle show all the students and their details for each classroom. 我有一个字典列表,我想切换显示每个教室的所有学生及其详细信息。
This is the HTML: 这是HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="classrooms-details" ng-show="Students">
<table class="table table-striped">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.student.first_name}}</a></td>
<td>{{classroom.student.last_name}}</td>
<td>{{classroom.student.gender}}</td>
<td>{{classroom.student.birthday}}</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td><a href="#" ng-click="showStudents">{{classroom.classroom}}</a></td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
</div>
I've tried to use ng-click/ng-show, but it's not working. 我尝试使用ng-click / ng-show,但无法正常工作。
And this is the script: 这是脚本:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.classrooms = [{
"school": {
"id": 1,
"school_name": "IPSIA F. Lampertico",
"address": "Viale Giangiorgio Trissino, 30",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "1^A",
"floor": 0,
"students": [{
"classroom": 1,
"first_name": "Stefano",
"last_name": "Rossi",
"gender": "M",
"birthday": "1998-06-22"
}, {
"classroom": 1,
"first_name": "Luca",
"last_name": "Possanzini",
"gender": "M",
"birthday": "1999-11-22"
}]
}, {
"school": {
"id": 2,
"school_name": "ITIS A. Rossi",
"address": "Via Legione Gallieno, 52",
"city": "Vicenza"
},
"academic_year": "2015/2016",
"classroom": "2^B",
"floor": 0,
"students": [{
"classroom": 2,
"first_name": "Sergio",
"last_name": "Lazzari",
"gender": "M",
"birthday": "2001-01-29"
}]
}];
console.log($scope.classrooms);
});
I don't know how to access "students" values, and I'd like the students details to be shown only when clicking on the classroom name. 我不知道如何访问“学生”值,我希望仅在单击教室名称时才显示学生详细信息。
How could I accomplish this? 我该怎么做?
You just need to set a specific classroom as the "active" classroom and display the students within. 您只需要将特定的教室设置为“活动”教室并显示其中的学生即可。 The easiest way to do this would be something like:
最简单的方法是:
View 视图
<tr ng-if="activeClassroom" ng-repeat="student in activeClassroom.students">
<td>{{student.first_name}}</a></td>
<td>{{student.last_name}}</td>
<td>{{student.gender}}</td>
<td>{{student.birthday}}</td>
</tr>
... ...
<tr ng-repeat="classroom in classrooms">
<td><a href="#" ng-click="setActiveClassroom(classroom)">{{classroom.classroom}}</a></td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
Controller 调节器
$scope.activeClassroom = null;
$scope.setActiveClassroom = function (classroom) {
$scope.activeClassroom = classroom;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.