CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Suresh PMS
Suresh PMS

Reputation: 246

Angular JS - Show 1 div and hide all others

I have a requirement of toggling between div show/hide. I could achieve it through following code

 <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
            <div class="player-head">
                <div class="player-name" ng-click="showDetails = ! showDetails" id="name-{{selectedPlayer.id}}">{{selectedPlayer.firstName}})</div>

            </div>
             <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-show="showDetails">
                Hi, I am {{selectedPlayer.firstName}} - shown now
            </div>
  </div>

Clicking the div: player-head shows fav-player-score-detail But, challenge is to hide all other DIVs except the one shown. I should not see all the DIVs expanded at once. Only one should be expanded. Pls help!

Demo Here

Thanks in advance!

Upvotes: 2

Views: 1107

Answers (3)

Kirill Slatin
Kirill Slatin

Reputation: 6143

Save selected div on ng-click and update ng-show to display only if this div is the selected one.

Upd: to maintain toggle functionality for the details, I'd use a function instead of an inline expression.

 $scope.toggleDetails = function(name){
    if($scope.detailsShown === name){
        $scope.detailsShown = null;
    } else {
        $scope.detailsShown = name;
    }
 }
...
<div class="player-name" ng-click="toggleDetails(selectedPlayer.firstName)" >
...
<div class="fav-player-score-detail"  ng-show="selectedPlayer.firstName==detailsShown">

Updated fiddle

Upvotes: 1

byteC0de
byteC0de

Reputation: 5273

Try This 

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.selectedPlayers=[
    {firstName:'abc', id:1},
     {firstName:'pqr', id:2},
     {firstName:'xyz', id:3},
     {firstName:'ghi', id:4},
     {firstName:'lmn', id:5}
    ];
  
  $scope.newSelection = function(id){
    $scope.selected = id;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
    <div class="player-head" >
      <div class="player-name"  id="name-{{selectedPlayer.id}}" ng-click="newSelection(selectedPlayer.id);">{{selectedPlayer.firstName}}</div>
    </div>
    <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-if="selected == selectedPlayer.id">
      Hi, I am {{selectedPlayer.firstName}} - shown now
    </div>
  </div>
</div>

Upvotes: 2

Yin Gang
Yin Gang

Reputation: 1443

var app = angular.module('app',[]);
app.controller('myController',function($scope){
		$scope.selectedPlayers=[
    {firstName:'abc'},
     {firstName:'pqr'},
     {firstName:'xyz'},
     {firstName:'ghi'},
     {firstName:'lmn'}
    ];
    
    $scope.showDetailIndex = -1;
    $scope.updateShowIndex = function(index){
      $scope.showDetailIndex = index;
    }


});
.player-name{
	width:200px;
	height:20px;
	border:2px solid tomato;
}
.fav-player-score-detail{color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
  <body ng-controller="myController">
     <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers">
				<div class="player-head">
					<div class="player-name" ng-click="updateShowIndex($index);">
					  {{selectedPlayer.firstName}}
					 </div>
					
				</div>
				 <div class="fav-player-score-detail"  ng-show="showDetailIndex == $index">
					Hi, I am {{selectedPlayer.firstName}} - shown now
				</div>
      </div>
  </body>
</html>

Updated jsfiddle

Upvotes: 0

Related Questions