打开和关闭面板的角度方式

Question

在Angular中，如果我有几个面板，类似于标签，如何在点击时打开面板并为其设置动画，如果我单击其他面板，则会加载新的html，但是如果我单击一个打开的面板则需要动画下来。

几乎完全像http://plnkr.co/edit/?p=preview但其中有3个。

我已经看过ngRouter和UI-Router，我认为UI-Router更接近我需要的东西，因为你可以删除一个视图。

Answer 1

angular-ui绝对是你想要的，你可以看到他们的样本site几乎完全重现了你发布的jQuery示例。

Answer 2

我创建了一个plnkr来显示类似的东西，但你必须调整CSS过渡。

这是使用ngAnimate和CSS过渡来控制动画。

标记：

<div class="tab-area" ng-switch on="activeTab">
  <div class="tab tab1" ng-switch-when="1">
    <h1>tab 1 content</h1>
  </div>
  <div class="tab tab2" ng-switch-when="2">
    <h1>tab 2 content</h1>
  </div>
</div>
<ul>
  <li ng-click="setTab(1)">tab 1</li>
  <li ng-click="setTab(2)">tab 2</li>
</ul>

JavaScript的：

$scope.activeTab = 0;
$scope.setTab = function(tabId){
  $scope.activeTab = $scope.activeTab===tabId ? 0 : tabId;
};