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

我有一个ng-repeat，它有一个按钮，该按钮具有切换该ng-repeat内的ng-show元素的功能。将所有ng-if设置为false，除了点击项目之外的点击

类movie_option跨度内的具有ng-click=toggleInfo($index)：

而且在div additional_info具有NG-显示，显示或隐藏的元素。

<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-显示切换的NG-显示状态。这工作正常。

我想要做的是将所有hiddenDiv状态设置为false，除了点击的状态以外，只有一个ng-show会成为true。

来源

2016-08-01 Peter Boomsma

这是一个纯算法问题，与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/

来源

2016-08-01 13:42:02 floribon

我试过这个，但它似乎没有得到预期的结果。当我有10个元素时，如何点击一个影响没有函数的其他元素？不是那个li（ng-repeat）中包含的点击？ –

+0

'ng-click =“displayedIndex = $ index”'是一个表达式。你不需要调用一个函数，但可以直接执行代码。如果你愿意，你可以写'ng-click =“onlyDisplay（$ index）”'，然后在你的作用域中添加函数'$ scope.onlyDisplay = function（idx）{$ scope.displayedIndex = idx; }' – floribon

+0

@PeterBoomsma实际上在测试之后，不直接使用$ scope.displayedIndex会更安全，而是将其作为一个属性$ scope.something.displayedIndex作为实例（否则行为取决于您的Angular版本）。检查工作小提琴：http://jsfiddle.net/6dkLqgfL/ – floribon

1

我认为这样做：

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

来源

2016-08-01 13:42:20 kukkuz

0

当触发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]; }

看看是否可行？

来源

2016-08-01 13:46:22 Zeokav

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

回答

相关问题