使用angular js切换html元素的可见性

Question

I have created a html dom structure like this. 我创建了这样的html dom结构。 I have used the ng-click to toggle the visibility of the DOM structure. 我已经使用ng-click来切换DOM结构的可见性。 For example if I am clicking in menu1 and if it is not visible it will be make visible. 例如，如果我在menu1中单击，并且如果它不可见，它将变为可见。 This is working perfectly . 这是完美的工作。 But I came across a scenerio where I need to close menu2(if it is open) on clicking menu1 & vice versa. 但是我遇到了一个场景，我需要单击菜单1来关闭菜单2（如果已打开），反之亦然。 Is is possible to accomplish using ng-click & ng-show 使用ng-click和ng-show可以完成

<span ng-click ="menu1 = !menu1">
      <div ng-show="menu1">
             //Rest of DOM element
     </div>
 </span>

  <span ng-click ="menu2 = !menu2">
        <div ng-show =menu2>
    //Rest of DOM element
    </div>
  </span>

Answer 1

Below I will provide you a sample. 下面我将为您提供示例。 I have provided two button, by clicking on each button it hide and show its respective content HTML : 我提供了两个按钮，通过单击每个按钮可以隐藏并显示其各自的HTML内容：

<body ng-app="ngToggle">
    <div ng-controller="myAppCtrl">
    <button ng-click="toggleCustom()">Custom</button>
    <span ng-hide="custom">From:
        <input type="text" id="from" />
    </span>
    <span ng-hide="custom">To:
        <input type="text" id="to" />
    </span>
    <span ng-show="custom2"></span>
    <button ng-click="toggleCustom2()">Custom</button>
    <span ng-hide="custom2">From:
        <input type="text" id="from" />
    </span>
    <span ng-hide="custom2">To:
        <input type="text" id="to" />
    </span>
    <span ng-show="custom2"></span>
  </div>
</body>

And JS: 和JS：

 angular.module('ngToggle', []).controller('myAppCtrl',['$scope', function($scope){
    $scope.custom = true;
    $scope.toggleCustom = function() {
        $scope.custom = $scope.custom === false ? true: false;
    };
     $scope.custom2 = true;
    $scope.toggleCustom2 = function() {
        $scope.custom2 = $scope.custom2 === false ? true: false;
     };
  }]);

Answer 2

<span ng-click="menuToggle(1)">
    <div ng-show="menu1">...</div>
</span>

<span ng-click="menuToggle(2)">
    <div ng-show="menu2">...</div>
</span>

And in controller (or inline inside ng-click but you'd be better off having it in the controller (or directive depending on your code structure)) 在控制器中（或在ng-click中内联，但是最好将其包含在控制器中（或取决于代码结构的指令））

$scope.menuToggle = function(menu) {
    $scope.menu1 = (!$scope.menu1 && menu === 1);
    $scope.menu2 = (!$scope.menu2 && menu === 2);
};

If I understand your question correctly, you want this scenario: When component/page/whatever is loaded, nothing is open (or you could set a default by settings '$scope.menu1 = true;' in controller). 如果我正确理解了您的问题，那么您会遇到这种情况：当加载组件/页面/所有内容时，什么都没有打开（或者您可以通过在控制器中设置'$ scope.menu1 = true;'来设置默认值）。 Then, if you would press menu1 span, menu1 would open. 然后，如果您按菜单1跨度，则菜单1将打开。 If you then press menu1 again, it would close. 如果再按一次menu1，它将关闭。 If you instead press menu2, menu1 is closed and menu2 opened. 如果改为按menu2，则关闭menu1，然后打开menu2。

In the future, try to be a bit more descriptive with your questions. 将来，请尝试对问题进行更多描述。 Hope it works out! 希望能解决！

使用angular js切换html元素的可见性

问题描述

2 个解决方案

解决方案1
0 2015-09-23 04:50:44

解决方案2
0 2015-09-23 06:00:30

使用angular js切换html元素的可见性

问题描述

2 个解决方案

解决方案1 0 2015-09-23 04:50:44

解决方案2 0 2015-09-23 06:00:30

解决方案1
0 2015-09-23 04:50:44

解决方案2
0 2015-09-23 06:00:30