Angularjs UI在ngRepeat中崩溃

Question

我试图在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创建了一个范围。 并且面板体的属性collapse应该具有相同的范围，对吧？ 看来collapse指令中的scope.$watch工作不正常。 或者也许我做错了什么？

谢谢

Answer 1

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

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

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

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