Question

.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中做到这一点，但我有点失去了作为角度来做这个的正确方法。指示？

Answer 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;
}

请记住，由于ng-repeat创建了一个新范围，因此无法在视图上执行activeItem=x。

Answer 2

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

在数据到达时的范围内：

ng-click

然后，您可以将xActive设置为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}">等指令：

$patches = Patch::orderBy('PatchCode', 'DESC')
    ->where('AccountID', '=', Auth::user()->AccountID)->get();

Answer 3

一个解决方案可能是

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

确保showIt在x对象上。

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

3 个答案: