Angular: Empty Fiddle
http://angularjs.org/
HTML
<ul ng-controller="ListController">
<li ng-repeat="item in items">
<div ng-click="open(item)">{{item.content}}</div>
</li>
<ng-switch on="anyItemOpen()">
<div ng-switch-when="true">
<div ng-controller="ItemController" ng-init="item=opened">
{{item.name}}{{item.content}}
</div>
</div>
</ng-switch>
</ul>
JavaScript
function ListController($scope) {
$scope.items = [
{
name: 'item1',
content: 'content1'},
{
name: 'item2',
content: 'content2'},
{
name: 'item3',
content: 'content3'}
];
$scope.open = function(item) {
if ($scope.isOpen(item)) {
$scope.opened = undefined;
} else {
$scope.opened = item;
}
};
$scope.isOpen = function(item) {
return $scope.opened === item;
};
$scope.anyItemOpen = function() {
return !($scope.opened === undefined);
};
}
function ItemController($scope) {
}