在 AngularJS 中显示/隐藏/切换答案

【问题标题】：Show/Hide/Toggle in AngularJS在 AngularJS 中显示/隐藏/切换
【发布时间】：2015-05-03 08:30:35
【问题描述】：

我有带 2 个按钮的导航栏。

<div class="navbar-header">
    <div class="navbar-header">
         <div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile"><i class="fa fa-bars fa-3x"></i></div>
         <div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent"><i class="fa fa-ellipsis-v fa-3x"></i></div>
    </div>
</div>

当点击 div#toggle-menu 时，会显示 div#sidebar-mobile-wrapper。

<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile"></div>

当我点击 div#toggle-function 时，它会显示 div#right-content-mobile。

<div class="container-fluid right-content-mobile" ng-show="isShowRightContent"></div>

这一切都奏效了。但现在我想，一次只能显示一个 div。因此，当我单击#toggle-menu 时，如果 div#right-content-mobile 可见，它将是隐藏的和 sidebar-mobile-wrapper 等。

【问题讨论】：

你为什么不使用一个变量并在ng-show中检查它的值？
我以前做过，但没有按我想要的方式工作。
the way I wanted 是什么意思？
对不起我的英语。 “一次只能显示一个 div。所以当我单击#toggle-menu 时，如果 div#right-content-mobile 可见，它将是隐藏和 sidebar-mobile-wrapper 等。”
见下面的my answer

标签： javascript angularjs

【解决方案1】：

寻找this。我希望它正是你所需要的。实际上，您需要为此任务使用现成的解决方案（例如选项卡、手风琴、面板）。

  <div class="navbar-header">
      <div class="navbar-header">
           <div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile;isShowRightContent = false;"><i class="fa fa-bars fa-3x"></i><button>isShowSideBarMobile</button></div>
           <div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent;isShowSideBarMobile = false;"><i class="fa fa-ellipsis-v fa-3x"></i><button>isShowRightContent</button></div>
      </div>
  </div>
  <div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile && !isShowRightContent">sidebar-mobile-wrapper</div>
  <div id="right-content-mobile" class="container-fluid" ng-show="isShowRightContent && !isShowSideBarMobile">right-content-mobile</div>

【讨论】：

谢谢。这是最简单的方法。

【解决方案2】：

仅使用mobileMenuCollapsed 变量：

<div class="navbar-header">
        <div class="navbar-header">
             <div id="toggle-menu" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-bars fa-3x"></i></div>
             <div id="toggle-function" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-ellipsis-v fa-3x"></i></div>
        </div>
    </div>

<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="!mobileMenuCollapsed"></div>
<div class="container-fluid right-content-mobile" ng-show="mobileMenuCollapsed"></div>

【讨论】：

【解决方案3】：

将模型值的工作封装到控制器中是一个非常好的主意，这使您能够轻松地改变行为。

您可以使用以下方法：

<div class="navbar-header">
  <div id="toggle-menu" ng-click="contentToggle('mobile')">Toggle mobile</div>
  <div id="toggle-function" ng-click="contentToggle('right')">Toggle right</div>
</div>

<div ng-show="isContentToggled('mobile')">
  <strong>Mobile content</strong>
</div>
<div ng-show="isContentToggled('right')">
 <strong> Right content</strong>
</div>

使用控制器方法

$scope.content = undefined;
$scope.contentToggle = function(name){
  if ($scope.isContentToggled(name)){
    $scope.content = undefined;
  } else {
    $scope.content = name;
  }
}

$scope.isContentToggled = function (name){
  return $scope.content == name;
}

你可以在http://plnkr.co/edit/WoqtP8ZpvPh2r94ITQvf?p=preview看到一个例子

【讨论】：