吳點擊和ng顯示AngularJS

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-點擊/ NG出現，但它不工作。

這是腳本：

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

我不知道如何訪問「學生」的價值觀，我想同學們詳細介紹了教室名稱點擊時要纔會顯示。

我怎麼能做到這一點？

Answer 1

你只需要將一個特定的教室設置爲「活動」教室並在其中顯示學生。要做到這一點，最簡單的方法是這樣的：

查看

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