Question

我有一个词典列表，我想切换显示所有学生及每个教室的详细信息。

这是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>

我尝试过使用ng-click / ng-show，但它无效。

这是剧本：

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);
});

我不知道如何访问＆＃34;学生＆＃34;价值观，我希望只有在点击课堂名称时才能显示学生的详细信息。

我怎么能做到这一点？

Answer 1

您只需将特定教室设置为＆＃34;活动＆＃34;教室和展示学生。最简单的方法是：

查看

<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>

<强>控制器

$scope.activeClassroom = null; $scope.setActiveClassroom = function (classroom) { $scope.activeClassroom = classroom; };

Ng-click和ng-show AngularJS

1 个答案: