嘿，伙计们，我正在尝试创建一个可折叠的面板：所以应该有面板标题和面板主体来显示内容。单击时的行为是当按下按钮时，内容将折叠，如果单击同一按钮，内容将关闭。如果单击第二个按钮，将折叠第二个按钮的内容，并关闭第一个按钮折叠。基本上应该像一个可折叠的面板（bootstrap）工作，但开发只有角。到目前为止我已经做到了，但我是角度初学者，所以如果你能帮我。。。
fiddle:
<body ng-app="app">
<div ng-controller="Test" class="container">
<div class="custom">
<button ng-click="show = 1" class="btn">collapse 1</button>
<button ng-click="show = 2" class="btn">Collapse 2</button>
<div class="form-group" ng-show="show==1">
<div class="sec">show 1</div>
</div>
<div class="form-group" ng-show="show==2">
<div class="sec">show 2</div>
</div>
<div class="form-group" ng-show="show==3">
</div>
</div>
</div>
</body>
最佳答案
所以这里有一个更新的fiddle应该能满足您的要求。有一些变化，但似乎是有效的。它不使用引导程序，但需要为动画设置动画。
我在表单组元素周围放了一个包装器，并将ng-show更改为ng-if。
//html
<button ng-click="showDiv(1)" class="btn">collapse 1</button>
<button ng-click="showDiv(2)" class="btn">Collapse 2</button>
<div class="sec-wrp" ng-if="show === 1">
<div class="form-group" >
<div class="sec">show 1</div>
</div>
</div>
<div class="sec-wrp" ng-if="show === 2">
<div class="form-group" >
<div class="sec">show 2</div>
</div>
</div>
<div class="form-group" ng-if="show==3" >
</div>
click事件现在使用要显示的div值调用控制器中的函数。控制器通过将
$scope.show值设置为0来响应。如果currentShow值为零（初始化时），则将$scope.show值设置为传递的值，并将currentShow变量重置为新值，无需超时。如果传递的值等于currentShow值，则将其视为一个切换，不重置$scope.show并将currentShow重置为零，关闭div。如果传递的int不等于currentShow，则将currentShow和$scope.show设置为新值。//controller
var app = angular.module('app', ['ngAnimate']);
app.controller('Test', ['$timeout','$scope', function($timeout, $scope) {
$scope.show = 0;
var currentShow = 0;
$scope.showDiv = function(int){
$scope.show = 0;
if(currentShow === 0){
currentShow = int;
$scope.show = int;
return false;
}
if(currentShow === int){
$timeout(function(){
currentShow = 0;
return false;
}, 1000)
}else{
$timeout(function(){
currentShow = int;
$scope.show = int;
}, 1000)
}
}
}]);
1秒的
$timeout值对应于动画的转换时间，即允许在css中等待1秒动画完成一秒，css使用ng enter、ng leave而不是关键帧。如果您想在这里调整转换时间，只需确保同时调整$timeouts。//css
.custom{position: relative; z-index: 2; border: 1px solid #ccc;}
.sec{
padding: 20px;
border: 1px solid orangered;
background: orange;
height: 100px;
z-index: 1;
}
.sec-wrp{
overflow: hidden;
transition: all ease 1s;
}
.sec-wrp.ng-enter{
opacity: 0;
height: 0;
}
.sec-wrp.ng-enter.ng-enter-active{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave{
opacity: 1;
height: 100px;
}
.sec-wrp.ng-leave.ng-leave-active{
opacity: 0;
height: 0;
}
希望这有帮助。