Question

我有一个ng-repeat，它有一个按钮，其功能可以在ng-repeat中切换ng-show元素。

班级movie_option内部有一个ng-click=toggleInfo($index)：

div additional_info有一个显示或隐藏元素的ng-show。

    <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-show中切换ng-show状态。这很好。

我想要做的是将所有hiddenDiv状态设置为false，除了点击的那个，因此只有一个ng-show是真的。

Answer 1

这是一个纯粹的算法问题，与Angular无关。

不是每个项目都有布尔值，只记得应该显示的元素（索引）要简单得多：

<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];
}

看看这是否有效？

将所有ng-if设置为false，单击除了单击的项目

3 个答案: