how to create sub rows in angularjs? - angularjs

Question

I created a table using angular. Some rows in the table have child rows with the same properties as parent. I want to create the child rows whenever the user clicks on the parent row (parent rows would have a carrot sign that specifies there are some child rows). I am really new to angular and I need to see an example so that I can understand how it happens in angular. can anybody help?
here is my html:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="student in students">
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in children">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>
the "hasChildren" cell would have a carrot sign which will collapse and expand the children rows.
here is the js file:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http({
method: 'GET',
url: contextPath + '/students'
})
.then(function (response) {
var students = response.data;
$scope.students = students;
});
$scope.getChildren = function(student){
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
var children = response.data;
$scope.children = children;
});
}
})

Answer 1

Take a look on that approach
<table>
<tbody ng-repeat="parent in parents">
<tr>
<td>
Parent ...
</td>
</tr>
<tr ng-show="SomeCarrotCondition(parent)" ng-repeat="child in parent.children">
<td>
Child...
</td>
</tr>
</tbody>
</table>
Code sample:
$scope.getChildren = function(student) {
studen.expanded = !student.expanded; // expand/collapse items
if (student.children) { // request a server only once to get the children
return;
}
var parentStudentId = student.id;
$http({
method: 'GET',
url: contextPath + '/students/children?studentId=' + parentStudentId
})
.then(function (response) {
student.children = response.data; // fill student children collection
});
}
HTML sample:
<div data-ng-app="myModule">
<div data-ng-controller="myController">
<table>
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody data-ng-repeat="student in students">
<tr>
<th>
<span data-ng-show="{{student.hasChildren}}">
<image data-ng-click="getChildren(student)" data-ng-src="image"></image>
</span>
</th>
<th>{{student.firstName}}</th>
<th>{{student.lastName}}</th>
</tr>
<tr data-ng-repeat="child in student.children"
ng-show="student.expanded">
<th></th>
<th>{{child.firstName}}</th>
<th>{{child.lastName}}</th>
</tr>
</tbody>
</table>
</div>
</div>