ng-click - 在 ng-repeat 中隐藏所有其他 div 不是这个 $index

Question

我想做的是类似于手风琴。

简单的说我有一个带有 <a> 标签的 ng-repeat，点击后会显示另一个 div 嵌套在 ng 中的 "Printpanel" -显示.

如果用户点击另一个 <a> 标签，我想隐藏之前显示的所有其他 div，只打开那个相关的标签。

我正在使用 $index 来触发特定的 div。

这是我所做的：

 <div ng-repeat="product in $ctrl.Products">
    <a href="#" ng-click="showDetails = $index;>CONFIGURE</a>


 <div class="Printpanel ng-hide" ng-show="showDetails == $index" ng-hide="showDetails != $index">
 </div>

好像 ng-hide 没有被识别...有人有想法吗？

Answer 1

不需要ngShow+ngHide：一个就够了

 <div class="Printpanel ng-hide" ng-show="showDetails == $index">

Answer 2

您还可以使用 ng-if：

<div class="Printpanel" ng-if="showDetails == $index">

编辑：

由于范围继承问题，您无法设置 showDetails 变量。为此使用 $parent。

工作示例：

<div ng-repeat="product in $ctrl.Products">
    <a href="#" ng-click="$parent.showDetails = $index">CONFIGURE</a>
    <div class="Printpanel" ng-if="$parent.showDetails == $index"> </div>
</div>

Answer 3

似乎您在这里错过了结束双引号 ng-click="showDetails = $index;

您还需要使用 ng-show/ng-hide/ng-if = 表达式

中的任何一个

ng-click - 在 ng-repeat 中隐藏所有其他 div 不是这个 $index

ng-click - hide all other div that isn't this $index within ng-repeat

angularjs

angularjs-ng-repeat

ng-show

ng-hide