Question

我有一些内容正在进行重复，这些内容项中的每一个都必须具有切换打开/关闭功能。我认为在单独标记它们时我最好的选择是使用像重复中项目的$ index那样的东西。我只是使用（bootstrap）类来显示/隐藏：

     <a ng-click="{{$index}}inner = !{{$index}}inner" >{{item.node.id}}</a>
     <div class="nested " ng-class="{'collapse' : !{{$index}}inner">

所以 - 点击上面的a切换。由于语法原因，这不起作用，但我想知道的是，如果这个问题有一个很好的优雅解决方案。这种方式我先尝试似乎有点凌乱。谢谢！

Answer 1

ng-repeat指令为每个元素创建了一个范围。因此，您只需使用ng-click切换该范围内的属性。

您的ng-class的语法也不完全正确。

有关工作示例，请参阅http://jsbin.com/yuyucojeco/edit?html,js,output

Answer 2

我喜欢在实际对象中添加属性。然后，在ng-repeat中，您可以引用单个对象（而不是尝试重新索引到数组中）并根据需要应用所有逻辑。

也许是这样的：

<div ng-repeat="item in array">
 <a ng-click="item.collapsed = !item.collapsed" >{{item.node.id}}</a>
 <div class="nested " ng-class="{'collapse' : item.collapsed"></div>

</div>

Answer 3

我在使用bootstrap的ng-repeat中实现了类似的smt，如下所示：这是按钮：

<a data-toggle="collapse" data-target="#{{item.id}}" class="accordion-toggle btn btn-xs btn-success"></a>

然后是可折叠标签：

<div class="accordion-body collapse" id="{{item.id}}"> <!-- accordion starts -->
    <!-- some content here -->  
</div> <!-- accordion ends -->

个人在ng-repeat内切换

3 个答案: