2

我正在尝试在 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 中的“折叠”来自：

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

至：

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

但是我没有看到任何东西实际上崩溃了。一切都停留在屏幕上的位置。有任何想法吗？

4

1 回答 1

4

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

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 崩溃示例：

  1. isThingsCollapsed jsfiddle正在折叠一个具有两个 div 作为内容的 div，其中一个使用 ng-repeat，另一个使用相同 JSON 的 div 手动输出。

  2. 切换图表/表格（外部 JSAPI 作品）正在折叠在包含 ng-repeat 表格的 div 上。

  3. 带有我自己的答案的多级表（如果单击，则在另一个表中）和 jsFiddle多个 ng-repeat 表未填充 DOM w。LVL2向您展示了我在两个嵌套的 ng-repeat 表中遇到的问题，因此不使用折叠，而是使用 ng-switch。这让您有一种在行级别上展开/折叠的“感觉”。

希望这可以清除它。

于 2013-07-22T14:18:17.270 回答