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

在Angular中，如果我有几个面板，类似于选项卡，如何在单击时打开面板并向上设置动画，如果我单击其他面板，则加载新的html，但如果单击打开的面板，则需要向下设置动画

几乎和他们中的三个一模一样

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

肯定是你想要的，你可以看到他们的示例几乎完全是你发布的jQuery示例的翻版。

我创建了一个示例来显示类似的东西，但是你必须调整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>

---

几乎与此完全相同，但在Angular中，执行逻辑检查的方法类似于thisPanel='open'{thisPanel.close；}或者{openPanel}如果使用Angular ui，则需要以有状态的方式对其进行更多思考。他们的示例站点非常擅长演示这一点。。这不是如果thisPanel=='open'，而是如果activeState是'contacts'，则执行x。您可以使用状态转换钩子在特定时间执行代码，以及oneter、onExit等。我将对此进行研究。如果您应用基于状态的逻辑，我想您不能使用默认的ui sref=contact？这就是我在网站上缺少的例子。是的，你绝对可以。例如，演示站点展示了如何使用当前状态在选项卡看起来被按下时有条件地更改页面上的项目。这取决于你的逻辑要走多远，这需要一个更彻底的问题，我认为这显然是一个意见问题，但是，虽然我认为这是一个如何解决这个问题的很好的简单示例，但你会很快遇到更复杂的场景，希望你从一开始就使用ui路由器。

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