Question

嘿伙计们我正在尝试创建一个可折叠的面板：所以应该有面板标题和面板主体来显示内容。单击时的行为是按下按钮时内容将向下折叠，如果单击相同按钮，内容将关闭。如果单击第二个按钮将折叠第二个按钮的内容，并关闭第一个按钮折叠。基本上应该像可折叠面板（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>

Answer 1

所以这里有一个更新的fiddle，应该符合你要求的要求。有一些变化，但似乎有效。它不使用bootstrap，但你需要动画制作动画。

我在表单组元素周围添加了一个包装器，并且已将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值设置为传递的值并重置{{ 1}}变量到新值没有超时。如果传递的值等于currentShow值，则会通过不重置currentShow并将$scope.show重置为零来关闭div来将其视为切换。如果传递的int不等于currentShow，则会将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) } } }]);值对应于动画的过渡时间，即允许在你的css中完成1秒动画的一秒等待时间，使用ng-enter，ng-离开而不是关键帧。如果您想在此处调整转换时间，请确保您还调整$ timeouts。

$timeout

希望这有帮助。

angularjs1折叠同一个不同内容的面板

1 个答案: