Angularjs UI 在 ngRepeat 中崩溃答案

【问题标题】：Angularjs UI collapse in ngRepeatAngularjs UI 在 ngRepeat 中崩溃
【发布时间】：2014-03-18 01:34:31
【问题描述】：

我正在尝试在 ngRepeat 中嵌入一些可折叠面板。这就是我所拥有的：

<div class="panel panel-default" ng-repeat="element in elements">
 <div class="panel-heading">
  {{element.name}}
  <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button>
 </div>
 <div class="panel-body" collapse="element.isCollapsed">
  Content
 </div>
</div>

现在，当我单击按钮时，折叠不起作用。从文档中我了解到中继器为每个element 创建了一个范围。并且 panel-body 的属性 collapse 应该具有相同的范围，对吧？ collapse 指令中的 scope.$watch 似乎无法正常工作。还是我做错了什么？

谢谢

【问题讨论】：

请为它创建一个小提琴。请解释一下 ng-click="element.isCollapsed != element.isCollapsed" 你在点击事件中检查同一个元素
您好 V31，感谢您的评论。我创建了一个小提琴jsfiddle.net/nZ9Nx/7 并更正了代码。

标签： javascript angularjs twitter-bootstrap collapse

【解决方案1】：

请检查更新的小提琴：http://jsfiddle.net/nZ9Nx/9/

我已经创建了应用程序并在其中注入了 ui-bootstrap 以使折叠工作正常。

angular.module('test', ['ui.bootstrap']);

【讨论】：

ui-bootstrap 有什么特别之处？
它是一个为可用的引导 javascript 组件定义指令的库。这有助于将 javascript 组件（角度范围外）置于角度范围内。
嗨！谢谢你的建议。它工作得很好！这正是我需要的。基本上你使用经典的 ng-hide/ng-show 绕过“collapse”指令，对吗？我非常专注于我的解决方案，我无法看到最简单的解决方案。谢谢！无论如何，理解为什么collapse 不起作用会很有趣......
@Enrico - 现在遇到同样的问题。我认为这与角度处理模板的方式和引导折叠插件的工作方式有关。基本上，我认为当 bootstrap javascript（崩溃插件所需）启动时，ng-repeat 的东西还没有发生，所以实际上 boostrap JS 永远没有机会发挥它的魔力。

【解决方案2】：

问题是

<div class="panel-heading" toggle target="collapseOne">

在示例中是硬编码的。替换为...

<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">

同时更新这个标签

<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">

这是一个完整的例子

<div ng-repeat="item in awesomeThings">
    <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
            <h4 class="panel-title">
                {{ item }}
            </h4>
        </div>
        <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
            <div class="panel-body">
                <!-- ... -->
            </div>
        </div>
    </div>
</div>

【讨论】：

嘿，如果折叠的面板不在 ng-repeat 范围内怎么办，那么你如何触发折叠