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

Toggle visibility of html elements using angular js

本文关键字：元素 可见性 html 切换 angular js 使用      更新时间：2023-09-26

我创建了一个类似这样的html dom结构。我使用了ng-click来切换DOM结构的可见性。例如，如果我在菜单1中单击，如果它不可见，它将变为可见。这非常有效。但我遇到了一个场景，我需要在点击menu1&反之亦然使用ng-click&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>

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

<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);
};

如果我正确理解你的问题，你希望出现这种情况：加载组件/页面/任何内容时，都不会打开任何内容(或者您可以通过在控制器中设置"$scope.menu1=true；"来设置默认值(。然后，如果按menu1 span，则会打开menu1。如果您再次按下菜单1，它将关闭。如果按菜单2，则菜单1关闭，菜单2打开。

以后，试着对你的问题进行更多的描述。希望它能成功！

相关文章：