javascript - Angular JS - Show 1 div and hide all others -


i have requirement of toggling between div show/hide. achieve 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, {{selectedplayer.firstname}} - shown             </div>   </div> 

clicking div: player-head shows fav-player-score-detail but, challenge hide other divs except 1 shown. should not see divs expanded @ once. 1 should expanded. pls help!

demo here

thanks in advance!

save selected div on ng-click , update ng-show display if div selected one.

upd: maintain toggle functionality details, i'd use function instead of 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


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -