将所有 ng-if 设置为 false on click 除了被点击的项目

Question

我有一个 ng-repeat，它有一个按钮，该按钮具有切换该 ng-repeat 内的 ng-show 元素的功能。

class 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 是 true。

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 = {}

Fiddle: 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 on click 除了被点击的项目

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

html

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-show