Currently, I am just starting out with AngularJS (1.5) and I have come across a challenge that I am hoping to get some assistance with. I have a table that is generated dynamically and for each row, I need to add a down arrow in the first column. Based on the selection of this arrow, I want to display the corresponding data in a separate div. At the moment, I can toggle the div visibility - clicking the arrow will open it and another click will close it. However, when I click on the arrow of the first row, details for all rows are being fetched instead of just the selected row. Any help on how to fix this would be greatly appreciated.
I've attempted to link the index of the selected row to fetch the correct details.
HTML File
<div>application
<span class="glyphicon glyphicon-menu-down" data-toggle="collapse" ng-class="{'selected': $index == selectedRow}"
ng-click="showAppDetails($index)"></span>
</div>
<div ng-if="selectedRow == index" ng-hide="!IsHidden">
<p> hellop</p>
</div>
Controller.js
$scope.IsHidden = false;
$scope.selectedRow = null;
$scope.showAppDetails= function(index){
$scope.selectedRow = index;
$scope.IsHidden = $scope.IsHidden ? false : true;