Angular ng-click切換並關閉

Question

作爲一個普通的角度新手，也試圖找到一個答案我的問題幾個小時。我終於放棄了，並認爲從更多有知識的人那裏詢問可能會更好，所以這裏就是這樣。

我有多個標籤，應該下拉一個容器。最初什麼都沒有打開。點擊後會打開下拉菜單，再次點擊時應該關閉。另外，當點擊另一個按鈕時，當前打開的容器也應該關閉。

這裏是我當前的代碼：

<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> 

目前，它很好地打開，當你第一次點擊的東西，也觸發了2口之間，但再次單擊打開TBA時，它不會關閉。另外我知道所有這些邏輯都應該在控制器中，但目前我仍然是一個新手，如果有人能幫我解決這個問題，我會很感激。

Answer 1

你需要一些這樣的

$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

Answer 2

試試這個，

<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>