如何用AngularJS动态选中菜单列表中的指定标签

嘿，这事儿不难，咱们一步步来搞定它！

首先，你需要在AngularJS控制器里维护一个变量来跟踪当前激活的标签页，然后给每个注册选项绑定点击事件更新这个变量，最后通过ng-class根据变量值切换selected类就行。

步骤1：设置控制器 #

在你的AngularJS控制器里定义activeTab变量，默认可以设为初始选中的候选人注册：

angular.module('yourAppName', [])
  .controller('TabController', function($scope) {
    // 默认选中候选人注册
    $scope.activeTab = 'cd-candidate';
    
    // 切换激活标签的方法
    $scope.setActiveTab = function(tabId, $event) {
      $scope.activeTab = tabId;
      // 阻止默认的锚点跳转（如果不需要页面滚动到锚点的话）
      $event.preventDefault();
    };
  });

步骤2：更新HTML模板 #

把你的菜单列表改成下面这样，给每个选项绑定ng-click和ng-class：

<div ng-controller="TabController">
  <ul class="cd-switcher">
    <li>
      <a ng-class="{selected: activeTab == 'cd-candidate'}" 
         href="#cd-candidate"
         ng-click="setActiveTab('cd-candidate', $event)">
        Candidate Sign up
      </a>
    </li>
    <li>
      <a ng-class="{selected: activeTab == 'cd-assessor'}" 
         href="#cd-assessor"
         ng-click="setActiveTab('cd-assessor', $event)">
        Assessor Sign up
      </a>
    </li>
    <li>
      <a ng-class="{selected: activeTab == 'cd-company'}" 
         href="#cd-company"
         ng-click="setActiveTab('cd-company', $event)">
        Company Sign up
      </a>
    </li>
  </ul>
</div>

关键说明 #

• ng-class="{selected: activeTab == 'tabId'}"：当activeTab的值和当前标签的ID匹配时，就会给这个a标签加上selected类。
• ng-click="setActiveTab('tabId', $event)"：点击时调用控制器里的方法，把activeTab更新为当前标签的ID，同时通过$event.preventDefault()阻止浏览器默认的锚点跳转行为（如果你需要锚点跳转的话，可以去掉这行）。
• 记得把yourAppName换成你实际的AngularJS应用名称，确保控制器和模板关联正确。

这样点击任何一个注册选项，对应的标签就会自动变成选中状态啦！

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