我遇到了一个角度引导折叠指令和CSS的问题。基本上,当您将指令"collapse"添加到div时,它可以正常工作。但是,当您尝试展开/折叠表行时,过渡效果似乎存在一些问题。
HTML:
<div ng-controller="dogCtrl">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dog in dogs">
<td><a href="#" ng-click="isCollapsed = !isCollapsed">{{dog.name}}</a></td>
<td>{{dog.breed}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="3">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</td>
</tr>
</tbody>
</table>
</div>
控制器:
var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
$scope.isCollapsed = true;
$scope.dogs = [
{
name: "Sparky",
breed: "Parson Russell Terrier"
}, {
name: "Shep",
breed: "German Shepard"
}
];
});
Codepen示例:http://codepen.io/anon/pen/qEoOBq
由于表格单元格的高度是"内容所需的最小高度"(如CSS 2.1规则中所示),我想您无法设置表格行高度的动画。
解决方法可能包括将单元格的内容包装到div
元素中,并为该容器设置动画。
这对我有效,但我没有进行大量测试:
<tr ng-repeat-end="">
<td colspan="2" style="padding: 0">
<div collapse="isCollapsed">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</div>
</td>
</tr>
对于表行上的角度动画来说,这是一个已知的问题。https://github.com/twbs/bootstrap/issues/12593
这里展示了最好的方法。
<tr ng-click="row1Open = !row1Open">
<td>Acrylic (Transparent)</td>
<td>{{row1Open}}</td>
<td>foo</td>
</tr>
<tr class="collapse-row">
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
Detail Row {{demo.hello}}
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
abc
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
$2.90
</div>
</div>
</td>
</tr>