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!
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">
Comments
Post a Comment