Ng-click and ng-show 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; 
};