setze alle ng-if auf false beim Klick außer angeklickt item

Question

Ich habe eine ng-Wiederholung, die eine Schaltfläche hat, die eine Funktion hat, die ein ng-show Element innerhalb dieser ng-Wiederholung schaltet.

Die innerhalb der Klasse movie_option Spannweite hat eine ng-click=toggleInfo($index):

Und die div additional_info hat eine ng-Show, die ein Element ein- oder ausgeblendet.

<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> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="additional_info" ng-show="hiddenDiv[$index]"> 
       {{movie.overview}} 
      </div> 
     </li> 
    </ul> 

Wenn ein Benutzer auf das Symbol klickt, ruft es diese Funktion:

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

Dies schaltet die ng-Show Zustand von der hiddenDiv ng-Show. Das funktioniert gut.

Was ich tun wollte, ist, dass alle hiddenDiv-Zustände auf falsch gesetzt werden, außer auf den, der angeklickt wurde, so dass nur eine ng-show wahr wäre.

Answer 1

Das ist ein reines Algorithmusproblem, nicht verwandt mit Angular.

Statt einen boolean pro Stück zu haben, wäre es viel einfacher sein, nur das Element erinnert (Index), der angezeigt werden soll:

<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="model.displayedIndex = $index"></i></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class="additional_info" ng-show="$index === model.displayedIndex"> 
      {{movie.overview}} 
     </div> 
    </li> 
</ul> 

Und in Ihrem Controller $scope.model = {}

Fiddle: http://jsfiddle.net/6dkLqgfL/

Answer 2

ich denke, das tun würde:

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

} 

Answer 3

Sie könnten alle hiddenDiv-Elemente einfach manuell auf false setzen, wenn die Funktion toggleInfo ausgelöst wird.

$scope.toggleInfo = function(index){ 
    for(int i = 0; i<($scope.hiddenDiv).length; i++) 
    $scope.hiddenDiv[i] = false; 

    $scope.hiddenDiv[index] = !$scope.hiddenDiv[index]; 
} 

Sehen Sie, ob das funktioniert?