Angular ng-click 切换并关闭

Question

作为一个普通的 angular 新手，我花了好几个小时试图找到我的问题的答案。我终于放弃了，我想问问更有知识的人可能会更好，所以就这样吧。

我有多个选项卡应该下拉一个容器。最初什么都没有打开。单击时会打开一个下拉菜单，再次单击时它应该会关闭。此外，当单击另一个按钮时，当前打开的容器也应关闭。

这是我当前的代码：

<div ng-init="item = 0">
  <div class="dropdon" ng-show="item == 1">
  </div>

    <div class="dropdon" ng-show="item == 2">
  </div>
</div>

<ul class="nav">                             
<li>
  <div class="btn"  href="#" ng-click="item = 1"
       ng-class="{ active:item == 1 }"><span>Nr1</span></div>
</li>

<li>
<div class="btn" href="#" ng-click="item = 2"
     ng-class="{ active:item == 2}"><span>Nr2</span></div>
</li>

目前，当您第一次单击某个内容时它会很好地打开，并且还会在两个打开之间切换，但再次单击打开的 tba 时它不会关闭。我也知道所有这些逻辑都应该在控制器中，但目前我在这方面还是个新手，如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

试试这个，

<div>
 <div class="dropdon" ng-show="firstitem">
 </div>

<div class="dropdon" ng-show="seconditem">
</div>
</div>

<ul class="nav">                             
 <li>
   <div class="btn"  href="#" ng-click="firstitem = !firstitem;seconditem=false"
    ng-class="{ active:item == 1 }"><span>Nr1</span></div>
 </li>

 <li>
   <div class="btn" href="#" ng-click="seconditem = !seconditem;firstitem=false"
    ng-class="{ active:item == 2}"><span>Nr2</span></div>
 </li>

Answer 2

你需要这样的东西

$scope.item = 0;

$scope.toggle = function(itemPos) {
   if ($scope.item === itemPos) {
       $scope.item = 0;
   }
   else {
       $scope.item = itemPos;
   }
}

并且在HTML

<div>
  <div class="dropdon" ng-show="item === 1"></div>
  <div class="dropdon" ng-show="item === 2"></div>
</div>

<ul class="nav">                             
  <li>
    <div class="btn" ng-click="toggle(1)" ng-class="{ active:item === 1 }"><span>Nr1</span></div>
  </li>

  <li>
    <div class="btn" ng-click="toggle(2)" ng-class="{ active:item === 2}"><span>Nr2</span></div>
  </li>
</ul>

参见plnkr

Angular ng-click 切换并关闭

Angular ng-click toggle and close

angularjs

angularjs-ng-click