I am looking to display and hide table row details dynamically with every button click. However, whenever I click on the span glyphonic icon, all details data in the tr's are opened by default. What can I do to only make this data visible for the elements that have been clicked on? (in my scenario, I only want to show certain data when the user clicks on it):
<form role="form">
<script cam-script type="text/form-script">
$scope.selectedRow = null;
var persons = $scope.persons = [
{
"id": 1,
"name": "name1",
"age":"454",
"description":"this is a simple name"
} ,
{
"id": 2,
"name": "name2",
"age":"4543",
"description":"this is a simple name"
},
{
"id": 3,
"name": "name2",
"age":"4543",
"description":"this is a simple name"
}
];
camForm.on('form-loaded', function() {
camForm.variableManager.createVariable({
name: 'persons',
type: 'Array',
value: persons
});
});
$scope.pageNumber = 0;
$scope.IsHidden=true;
$scope.setPageNumber = function(index) {
$scope.pageNumber = index;
$scope.IsHidden = $scope.IsHidden ? false : true;
}
</script>
<div class="container">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in persons " >
<tr >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-default btn-xs" ><span class="glyphicon glyphicon-eye-open" ng-class="{$index == pageNumber }" ng-click="setPageNumber($index)($index)"></span></button></td>
</tr>
<tr ng-hide="IsHidden">
<td>
<label for="id" class="control-label">details</label>
<div class="controls">
<input id="description" class="form-control" type="text" ng-model="item.description" required readonly/>
</td>
</tr>
</tbody>
</table>
</div>
</form>