Question

我已经创建了这样的html dom结构。我使用ng-click来切换DOM结构的可见性。例如，如果我在menu1中单击并且如果它不可见则将使其可见。这很完美。但我遇到了一个场景，我需要关闭menu1（如果它是打开的），点击menu1＆amp;反之亦然。可以使用ng-click＆amp; amp; NG-显示

<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

下面我将为您提供一个示例。我提供了两个按钮，通过单击它隐藏的每个按钮并显示其各自的内容 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>

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

在控制器中（或在内部按键单击，但你最好在控制器中使用它（或指令取决于你的代码结构））

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

如果我理解你的问题，你想要这个场景：当加载组件/页面/任何内容时，没有任何内容打开（或者您可以通过设置＆$ 39; $ scope.menu1 = true;＆＃39;在控制器中设置默认值）。然后，如果你按menu1 span，menu1将打开。如果您再次按menu1，它将关闭。如果您改为按menu2，则关闭menu1并打开menu2。

将来，请尝试对您的问题进行更具描述性的描述。希望它成功！

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

2 个答案: