twitter-bootstrap ngRepeat 中的 Angularjs UI 崩溃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21851385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs UI collapse in ngRepeat
提问by Enrico
I am trying to embed some collapsible panels in a ngRepeat. This is what I have:
我正在尝试在 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>
Now, when I click on the button, the collapse doesn't work.
From the documentation I understand that the repeater creates a scope for every element.
And the attribute collapseof the panel-body should get the same scope, right?
It seems that the scope.$watchin the collapsedirective is not working properly.
Or maybe I'm doing something wrong?
现在，当我单击按钮时，折叠不起作用。从文档中我了解到中继器为每个element. 而且collapsepanel-body的属性应该是一样的作用域吧？看来，scope.$watch在collapse指令不能正常工作。或者也许我做错了什么？
Thanks
谢谢
回答by V31
Please check the updated fiddle: http://jsfiddle.net/nZ9Nx/9/
请检查更新的小提琴：http: //jsfiddle.net/nZ9Nx/9/
I have created the app and injected ui-bootstrap in it to have the collapse working.
我已经创建了应用程序并在其中注入了 ui-bootstrap 以使折叠正常工作。
angular.module('test', ['ui.bootstrap']);
回答by Natus Drew
The problem is
问题是
<div class="panel-heading" toggle target="collapseOne">
It's hardcoded in the example. Replace with...
它在示例中是硬编码的。用。。。来代替...
<div class="panel-heading" toggle target="collapse{{ $index + 1 }}">
Also update this tag
同时更新这个标签
<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
Here is a full example
这是一个完整的例子
<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>
