Question

我正在尝试在ng-repeat列表中使用ui-bootstrap的折叠。我已经将ui.bootstrap添加到我的模块中，并制定了这个html：

<div class="title">Things <a class="collapse" ng-click="isThingsCollapsed = !isThingsCollapsed">+</a></div>
<div collapse="isThingsCollapsed">
    <div  ng-repeat="thing in things">{{thing.displayName}}</div>
</div>

一切看起来都应该有效，即使点击链接我看到html中的'collapsing'来自：

 <div collapse="isThingsCollapsed" style="height: 81px;">

为：

<div collapse="isThingsCollapsed" style="height: 0px;">

但是看到什么都没有实际崩溃。一切都停留在屏幕上。有任何想法吗？

Answer 1

上周我遇到了同样的问题。您需要拥有最新的脚本。包括这些（如果尚未完成）：

http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js

也很容易忘记，是否需要ui.bootstrap作为参数...

var myApp = angular.module('myApp', ['ui.bootstrap']);

查看我创建的isThingsCollapsed jsfiddle ...

修改

由于我得到了一条评论，说我的答案甚至没有回答ng-repeat的崩溃，我试着告诉你我对这个问题的看法，然后是一些例子：

答案（上面的“编辑”）是关于你在问题中提供给我们的代码中问题的解决方法。由于我遇到了同样的问题 - 代码是正确的但没有显示崩溃，我终于发现我忘记在模块中包含['ui.bootstrap']作为参数，如上所示。

不同ng-repeat崩溃的例子：

isThingsCollapsed jsfiddle正在折叠一个有两个div作为内容的div，其中一个使用ng-repeat，另一个使用相同JSON的div手动输出。
Toggle Chart / Table (external JSAPI works)正在折叠包含ng-repeat表的div。
Multi-level tables (inside another if clicked)我自己的答案和jsFiddle Multiple ng-repeat tables Not filling DOM w. LVL2向您展示了我对两个嵌套的ng-repeat表格的问题，因此没有使用折叠，而是使用ng-switch。这会让您感觉在行级别上展开/折叠。

希望这清除它。

折叠ng-repeat列表

1 个答案:

修改