클릭 한 항목을 제외하고 클릭하면 모든 ng-if를 false로 설정합니다.

Question

ng-repeat에는 ng-repeat 요소를 토글하는 기능이있는 버튼이 있습니다.

그리고 DIV additional_info 표시하거나 요소를 숨기는 NG 쇼를 가지고 클래스 movie_option 범위 안에

은 ng-click=toggleInfo($index)있다. 사용자가 아이콘을 클릭하면

<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> 

는이 함수를 호출

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

이것은 hiddenDiv 겨 쇼에서 NG 쇼 상태에서 다른 상태로 전환합니다. 이것은 잘 작동합니다.

내가 원한 것은 모든 hiddenDiv 상태를 false로 놓는 것입니다. 단 하나의 ng-show 만 클릭하면 true가됩니다.

Answer 1

순수한 알고리즘 문제입니다. 각도와 관련이 없습니다.

대신 항목 당 부울을 가지고, 단지 표시되어야하는 요소 (인덱스) 기억하는 것이 훨씬 간단 할 것이다 :

<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> 

을 그리고 당신의 컨트롤러를 $scope.model = {}

바이올린 : http://jsfiddle.net/6dkLqgfL/

Answer 2

나는이 할 것이라고 생각 :

$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

toggleInfo 함수가 실행되면 모든 hiddenDiv 요소를 false로 수동으로 바꿀 수 있습니다.

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

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