Show one content at a time in ng repeat - angularjs

Question

I have the code here where I want to expand only one item at a time. I am not able to figure out the condition for this. Appreciate it if someone can point out what I might be missing.
function sample ($scope) {
$scope.procedures = [
{
definition: 'Procedure 1',
discharged: 23
},
{
definition: 'Procedure 2',
discharged: 2
},
{
definition: 'Procedure 3',
discharged: 356
}
];
}
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>

Answer 1

you need to store the previous selected Index to get things working .
html:
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{'hidden': !(curr == $index && showDetails)}">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
code:
function sample($scope) {
$scope.showDetails = true;
$scope.fireIt = function(index) {
$scope.curr = index;
if($scope.prevIndex == index){ -- (1)
$scope.showDetails = !$scope.showDetails; return;
}
$scope.prevIndex = index ;
if(!$scope.showDetails) $scope.showDetails=!$scope.showDetails; -- (2)
}
$scope.procedures = [{
definition: 'Procedure 1',
discharged: 23
}, {
definition: 'Procedure 2',
discharged: 2
}, {
definition: 'Procedure 3',
discharged: 356
}];
}
working sample up here for grabs .
Note : Quoted points (1) & (2) are key .

Answer 2

You need to store the state for each procedure. Or you could put the procedure definition in your variable, something like :
<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! (showDetails && showDetails == procedure.definition) }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>

Answer 3

<ul class="procedures" ng-app ng-controller="sample">
<li ng-repeat="procedure in procedures">
<h4>{{procedure.definition}}</h4>
<div class="procedure-details" ng-class="{ 'hidden': ! procedure.showDetail }">
<p>Number of patient discharges: {{procedure.discharged}}</p>
</div>
</li>
</ul>
function sample ($scope) {
$scope.clickLink = function(idx){
for(var i=0;i<$scope.procedures.length;i++){
if(i != idx)
$scope.procedures[i].showDetail = false;
else
$scope.procedures[i].showDetail = true;
}
}
$scope.procedures = [
{
definition: 'Procedure 1',
discharged: 23,
showDetail:false
},
{
definition: 'Procedure 2',
discharged: 2,
showDetail:false
},
{
definition: 'Procedure 3',
discharged: 356,
showDetail:false
}
];
}

Answer 4

You can define an activeItem variable in the controller to hold the item to be shown. Then, you should assign the index of the element you click to that variable:
ng-click="showDetails = ! showDetails; $parent.activeItem = $index"
Then, you should check both values to show an item:
ng-class="{ 'hidden': ! ( showDetails && $parent.activeItem == $index )}"
Check out the jsfiddle below:
http://jsfiddle.net/asmKj/1190/