Peter Boomsma Peter Boomsma - 6 months ago 14
AngularJS Question

set all ng-if to false on click except clicked item

I have an ng-repeat which has a button that has a function that toggles an ng-show element inside that ng-repeat.

The inside the class

span has an

And the div
has an ng-show that shows or hides an element.

<ul ng-cloak="showResult">
<li class="search_results" ng-repeat="movie in movies | orderBy: '-release_date' track by $index">
<div class="movie_info">
<div class="movie_options">
<div class="slide">
<span class="movie_option">
<span><i class="fa fa-question-circle" aria-hidden="true" ng-click="toggleInfo($index)"></i></span>
<div class="additional_info" ng-show="hiddenDiv[$index]">

When a user clicks on the icon it calls this function:

$scope.toggleInfo = function (index) {
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];

This toggles the ng-show state from the hiddenDiv ng-show. This works fine.

What I wanted to do is put all hiddenDiv states on false except the one that is clicked so only one ng-show would be true.


I think this would do:

$scope.toggleInfo = function(index) {
     for(var i in $scope.hiddenDiv) {
         if(index != i)
             $scope.hiddenDiv[i] = false;
     $scope.hiddenDiv[index] = !$scope.hiddenDiv[index];