角NG-重複切換菜單元素

我已經菜單充滿了$ HTTP方法角NG-重複切換菜單元素

<ul class="nav"> 
    <li ng-repeat="(itemIndex, item) in menuItems.menu_items"> 
     <a ng-click="showSubmenu(itemIndex)" ng-href="{{item.link}}">{{item.title}}</a> 
     <ul class="sub-nav" ng-show="isShowing(itemIndex)"> 
      <li ng-repeat="subItem in item.submenu"> 
       <a ng-href="{{subItem.link}}">{{subItem.title}}</a> 
       <span>{{subItem.desc}}</span> 
      </li> 
     </ul> 
    </li> 
</ul>

並在控制器

$scope.activeMenuIndex; 
$scope.showSubmenu = function(item) { 
    $scope.activeParentIndex = item; 
} 

$scope.isShowing = function(index) { 
    return $scope.activeParentIndex === index; 
};

基本上它的工作原理 - 點擊菜單元素隱藏其他元素和擴大點擊一個。問題是當我點擊打開的菜單元素 - 它不會隱藏。

也許你知道解決的一個更好的主意，比我（不完全）的方式？

問候！

來源

2014-10-16 cachaito

我用NG-點擊指令上顯示菜單。我不知道如何隱藏菜單第二次點擊。 - 那就是問題所在。 – cachaito 2014-10-16 21:24:55

如果菜單已經打開然後關閉，您可以檢查showMenu。 if（$ scope.activeParentIndex === item）{$ scope.activeParentIndex = null} else {$ scope.activeParentIndex = item; } – floribon 2014-10-16 21:26:11

@fliborn：這是一個有趣的方法。我會提供你的建議。無論如何，做這件事是在AngularJS中切換菜單項的好方法嗎？ – cachaito 2014-10-16 21:28:44

正如@fliborn說，你可以把這個邏輯在showMenu。或者，爲了清楚起見，考慮將showMenu（id）重命名爲toggleMenu（id） - 所以更清楚的是，如果您使用活動的ID對其進行調用，它將處理關閉案例。

但是，在這兩種情況下，你會做的@fliborn說，並設置activeParentIndex如果您切換當前活動的ID設置爲NULL。

從角度角度看，這當然是一個合理的路要走（即這是實現該行爲了良好的技術方式，如果這就是你想要的行爲）。

其他的事情要考慮的是你的方法是從UI的角度理想。您的最終用戶是否清楚他們可以點擊打開的一個以關閉？如果不清楚，考慮在所有非活動標題的左側放置一個「+」圖標，並在活動標題旁邊顯示「 - 」（如果使用glyphicons，則使用ng-class，或者如果使用glyphicons，則使用ng-show和ng-hide if你只是要使用文字或圖形）。

這樣一來，當用戶點擊打開一個節，「+」變成「 - 」，因爲它打開了，並且用戶意識到他們可以在頭再次點擊將其關閉。

來源

2014-10-16 22:39:09 Mike

它是弗洛裏博但fliborn聽起來也沒關係，我可以保留它作爲替代暱稱:) – floribon 2014-10-17 21:05:25

哎呀！我實際上從上面複製/粘貼以避免錯誤 - 應該從您的實際文章中複製/粘貼，而不是從其他評論中複製/粘貼！ ;-) – Mike 2014-10-21 19:23:16

您需要添加的條件是這樣的：

$scope.showSubmenu = function(item) { 
    if($scope.activeParentIndex == item){ 
     $scope.activeParentIndex = ""; 
    }else{ 
     $scope.activeParentIndex = item; 
    } 
}

來源

2015-05-19 10:22:40

是的，它的工作.. – 2015-05-19 10:27:18

在我的情況下，它以這種方式改變後，如果（$ scope.activeParentIndex === item）與3 === – 2016-02-15 15:06:56

角NG-重複切換菜單元素

回答

相關問題