在单击时将所有 ng-if 设置为 false，但单击的项目除外答案

【问题标题】：set all ng-if to false on click except clicked item在单击时将所有 ng-if 设置为 false，但单击的项目除外
【发布时间】：2016-12-06 14:55:57
【问题描述】：

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

类movie_option span 内部有一个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。

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat angularjs-ng-show

【解决方案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/

【讨论】：

我试过这个，但似乎没有得到预期的结果。当我有 10 个 li 元素时，单击一个中的 会如何影响其他没有功能的元素？点击不是包含在那个 li (ng-repeat) 中吗？
ng-click="displayedIndex = $index" 是一个表达式。您不需要调用函数，而是可以直接执行代码。如果您愿意，可以编写 ng-click="onlyDisplay($index)"，然后在您的范围内添加函数 $scope.onlyDisplay = function(idx) { $scope.displayedIndex = idx; }
@PeterBoomsma 实际上在对其进行测试之后，不直接使用 $scope.displayedIndex 而是将其作为属性 $scope.something.displayedIndex 更安全（否则行为取决于您的 Angular 版本）。检查工作小提琴：jsfiddle.net/6dkLqgfL
谢谢，看起来很干净的解决方案。当用户单击图标时，它会在model.displayedIndex 上设置重复索引，然后 ng-show 检查当前 $index 是否等于 model.displayedIndex，如果是，则将其设置为 true。这是一个正确的假设吗？我对此感到“奇怪”的是，点击 ng-repeat 如何影响其他 ng-repeat 元素？

【解决方案2】：

您可以在触发 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];
}

看看这是否有效？

【讨论】：

【解决方案3】：

我认为这样可以：

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

}

【讨论】：