angularjs 1折叠具有不同内容的相同面板答案

【问题标题】：angularjs1 collapse same pannel with different contentangularjs 1折叠具有不同内容的相同面板
【发布时间】：2017-08-24 05:53:08
【问题描述】：

大家好，我正在尝试创建一个可折叠面板：因此应该有面板标题和面板主体来显示内容。单击时的行为是当按下按钮时，内容将向下折叠，如果单击相同的按钮，内容将关闭。如果单击第二个按钮将折叠第二个按钮的内容并且第一个按钮折叠关闭。基本上应该像可折叠面板（bootstrap）一样工作，但仅使用角度开发。到目前为止我已经这样做了，但我是 Angular 的初学者，所以如果你能帮助我......

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>

【问题讨论】：

我看到你注意到引导程序并且只有角度。我可以推荐UI Bootstrap吗？
@Giovani Vercauteren 不可能，只有角度......

标签： javascript jquery html angularjs css

【解决方案1】：

所以这里有一个更新的fiddle，它应该满足您正在寻找的要求。有一些变化，但它似乎正在工作。它不使用引导程序，但您的动画需要 ng-animate。

我已经在您的表单组元素周围放置了一个包装器，并将 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)
        }
    }

}]);

一秒的$timeout 值对应于动画的过渡时间，即允许一秒的等待时间等待 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;
}

希望这会有所帮助。

【讨论】：

很高兴为您提供帮助:)