如何在 ng-repeat 中仅在单击时显示一个元素？答案

【问题标题】：How do I only show one element on click within an ng-repeat?如何在 ng-repeat 中仅在单击时显示一个元素？
【发布时间】：2015-07-22 11:43:58
【问题描述】：

.div(ng-repeat='x in xs')
    {{x}}
  .title-div(ng-click='showIt = ! showIt')
  .display-div(ng-show='showIt')
    .second-repeat(ng-repeat='b in bs')
       .display-contents(ng-if='x == b.x')
         {{b.name}}

html是jade/haml的模板，如果你不熟悉

因此，使用上面的代码，我可以在单击 title-div 时切换 ng-show。但是，我希望在 ng-repeat 中一次只能显示一个 display-div。当我单击 display-div 显示的相应标题时，其他标题将被隐藏。

我知道我将如何在 Jquery 中执行此操作，但我有点迷失在 Angular 中执行此操作的正确方法。指示？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

Angular 不是 jQuery，因此你不应该从 UI 的角度思考。显示此元素并隐藏另一个元素。从模型的角度思考。

@atinder 概述了其中一个解决方案，其中涉及扩展模型 (x)。另一种选择是在作用域上定义像activeItem 这样的变量，并在 UI 上单击项目时设置它。

.div(ng-repeat='x in xs')
  .title-div(ng-click='setActive(x)')
  .display-div(ng-show='activeItem==x')

关于你需要做的范围

$scope.setActive=function(item) {
   $scope.activeItem=item;
}

请记住，您不能在视图上执行 activeItem=x，因为 ng-repeat 会创建一个新范围。

【讨论】：

谢谢。这看起来很可靠。而且，对于我所问的，我认为这是最好的答案。如果它的 x 是 activeItem，请注意如何在单击时隐藏 display-div 的提示。 '将打开的项目切换回关闭'。我绝对需要从模型的角度思考。
如果 activeItem 有值并且调用再次获得活动项，则将 activeitem 设置为 null。我不确定我是否正确回答了您的问题。

【解决方案2】：

对于 ng 指令中的布尔值，您可以进行对象比较

在数据到达后的范围内设置：

$scope.state={xActive : $scope.xs[0]};

然后您可以将 xActive 设置为 ng-click 中的当前对象并在 ng-show 中检查它

.div(ng-repeat='x in xs')
  .title-div(ng-click='state.xActive = x')
  .display-div(ng-show='state.xActive == x')

对象比较的其他用例是ng-class、'ng-if 等指令：

<div ng-class="{'blue-class': state.xActive == x}">

【讨论】：

这真是太好了。我没有选择它的唯一原因是索引 [0] 在初始页面加载时始终打开。
不清楚预期的行为是什么......不难改变。也更容易展示如何从一开始就激活，而不是稍后返回“我想要一个打开”的相反问题

【解决方案3】：

一个解决方案可能是

.div(ng-repeat='x in xs')
  .title-div(ng-click='x.showIt = ! showIt')
  .display-div(ng-show='x.showIt')

确保 showIt 在 x 对象上。

【讨论】：

这里的问题是当点击另一个时它不会切换到当前的一个
不确定是否有帮助，节目仍然绑定到 x 的实例，并且没有什么可以改变 showIt