如何在AngularJS中实现两个元素的切换显示？

嘿，你已经找对方向啦！你的HTML结构思路完全没问题，核心问题应该是控制器里的toggle函数没写完对吧？我来帮你补全整个实现，再给你唠唠细节：

完整可运行的代码实现 #

HTML模板部分 #

<div ng-show='show'> 
  Visible element 
  <button ng-click='toggle()'> Toggle </button> 
</div> 
<div ng-hide='show'> 
  Hidden Element 
</div>

控制器逻辑部分 #

// 假设你已经定义了AngularJS应用，这里是对应的控制器
app.controller('ToggleController', function($scope) {
  // 初始化状态：默认显示第一个元素
  $scope.show = true;

  // 补全切换函数，实现状态反转
  $scope.toggle = function() {
    $scope.show = !$scope.show;
  };
});

代码逻辑说明 #

• ng-show='show'：当$scope.show为true时，第一个<div>会显示；值为false时自动隐藏。
• ng-hide='show'：和ng-show逻辑完全相反——当$scope.show为true时第二个<div>隐藏，false时显示，刚好实现了同一时间仅显示一个元素的需求。
• toggle函数：通过!$scope.show把当前的布尔状态反转，点击按钮时就会触发两个元素的显示/隐藏切换。

可选优化方案 #

如果你希望切换时直接把元素从DOM中添加/移除（而不是仅仅通过CSS隐藏），可以把ng-show和ng-hide换成ng-if：

<div ng-if='show'> 
  Visible element 
  <button ng-click='toggle()'> Toggle </button> 
</div> 
<div ng-if='!show'> 
  Hidden Element 
</div>

这种方式适合不需要保留隐藏元素DOM结构的场景，能减少页面DOM节点数量。

内容的提问来源于stack exchange，提问作者Melody Daniel