Angular入门：如何条件显示锚点标签并实现点击显示内容

嘿，作为AngularJS新手，你已经用ng-show搞定了锚点的条件显示，这步做得不错！要实现点击锚点时显示内容、未点击时隐藏，只需要借助一个状态变量和ng-click指令就行，具体步骤如下：

1. 在控制器中添加状态变量 #

首先在你的控制器（也就是代码里的vm对象）中，新增一个布尔变量来控制内容的显示状态，初始设为false（默认不显示内容）：

// 假设这是你的控制器代码
angular.module('yourApp').controller('YourController', function() {
  var vm = this;
  
  // 已有的变量
  vm.inScopeServicesListLength = ...; // 你的列表长度
  vm.moreInscopeServices = ...; // 更多内容的数量
  
  // 新增：控制内容显示的状态变量
  vm.showMoreContent = false;
});

2. 修改锚点标签，添加点击事件 #

接下来修改你的锚点标签，用ng-click指令切换状态变量的值，同时还可以根据状态切换锚点的文本（比如点击前显示"+X more"，点击后显示"Show less"）：

<span>
  <a class="req-clickable" 
     ng-show="vm.inScopeServicesListLength >= 6"
     ng-click="vm.showMoreContent = !vm.showMoreContent">
    {{ vm.showMoreContent ? 'Show less' : '+' + vm.moreInscopeServices + ' more' }}
  </a>
</span>

3. 给需要显示/隐藏的内容添加条件指令 #

最后，给你要显示的“更多内容”加上ng-show（或者ng-if，两者区别是ng-show是隐藏DOM，ng-if是移除/添加DOM），绑定到刚才的状态变量：

<!-- 这是你要显示/隐藏的更多内容 -->
<div ng-show="vm.showMoreContent">
  <!-- 这里放你要展示的额外内容，比如更多的服务列表项 -->
</div>

简单解释下原理： #

• vm.showMoreContent这个变量就像一个开关，初始是关闭（false）状态，内容不显示；
• 点击锚点时，ng-click="vm.showMoreContent = !vm.showMoreContent"会把开关状态反转（false变true，true变false）；
• 内容区域的ng-show="vm.showMoreContent"会根据开关状态自动显示或隐藏内容。

这样就完美实现了你要的效果：点击锚点显示内容，再点击就隐藏，而且锚点的文本还会跟着状态变化，用户体验更好哦！

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