Angular JS - Show 1 div and hide all others

Question

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!

byteC0de · Accepted Answer · 2016-05-09 10:02:43Z

2

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>

edited May 9, 2016 at 10:02

answered May 9, 2016 at 9:50

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Suresh PMS Over a year ago

Is it recommended to use conditional operators in the angular View? [Quoted Here]docs.angularjs.org/guide/expression No Control Flow Statements Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.

byteC0de Over a year ago

using condition in view is common

Suresh PMS Over a year ago

But, Error: Lexer Error: Unexpected next character at columns 1-1 [?] in expression [a?b:c] is the error thrown by angular

Kirill Slatin · Accepted Answer · 2016-05-09 14:11:19Z

1

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

edited May 9, 2016 at 14:11

answered May 9, 2016 at 9:56

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

2 Comments

Suresh PMS Over a year ago

Thanks Kirill. but could you please help me in dismissing the expanded div on clicking on itself as well ?

Suresh PMS Over a year ago

Oh.. Thats great! Thanks a lot Kirill :)

Yin Gang · Accepted Answer · 2016-05-09 10:02:20Z

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

Collectives™ on Stack Overflow

Angular JS - Show 1 div and hide all others

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related