I am experimenting with implementing collapsible and expandable panels within an ngRepeat loop. Here is my approach:
<tbody ng-repeat="item in Items">
<tr data-toggle="collapse" class="accordion-toggle">
<td>{{item.name}}</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed;getDetails(item.id);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
</td></tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead><tr>
<th>Student Name</th><th>Roll Number</th></tr></thead>
<tbody>
<tr>
<td>{{studentRecord.patientName}}</td><td>{{studentRecord.rollNumber}}</td>
</tr></tbody></table>
</div>
</td>
</tr>
</tbody>
Script :
$scope.getDetails = function (sId)
{
var studentDetails = DetailService.getDetail("studentsDetails", sId);
studentDetails.then(function(data) {
$scope.studentRecord = data;
});
}
Upon clicking a single caret button in the ngRepeat, everything functions as expected. However, upon clicking multiple items, each item seems to create its own scope. As a result, all records in the ngRepeat end up with same scope values. Any suggestions on how to resolve this issue?