使用 angularjs 打开菜单列表中的选定选项卡

Question

我有一个这样的列表。在我的主页上，我有三个选项 candiatesignup、assessor signup 和 employer signup.now 当我点击 assessor 想要选择 assessor 时。如何使用 angular js 动态地做到这一点。我试过了 ng-class

 <li><a ng-class="{selected: activeTab == 'cd-candidate'}" href="#cd-candidate">Candidate Sign up</a></li>

这是没有 ng-class:

 <ul class="cd-switcher">
  <li><a class="selected" href="#cd-candidate">Candidate Sign up</a></li>
  <li><a href="#cd-assessor">Assessor Sign up</a></li>
 <li><a href="#cd-employer">Employer Sign up</a></li>
 </ul>

Answer 1

您可以使用 ng-class 条件方法

设置单击中的选项卡值并应用 css class

试试下面，您可能不需要 CSS。

(function() {
  var app = angular.module('myApp', []);

  app.controller('TabCtrl', function() {
    this.tab = 1;
    //Set selected Tab
    this.setTab = function(tabId) {
      this.tab = tabId;
    };
    //Get Selected
    this.getTab = function(tabId) {
      return this.tab === tabId;
    };
  });
})();

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav>li.selected>a {
  color: #fff;
  background-color: #428bca;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <section ng-app="myApp" ng-controller="TabCtrl as tab">
    <ul class="nav">

      <li ng-class="{selected:tab.getTab(1)}"><a href="#cd-candidate" ng-click="tab.setTab(1)">Candidate Sign up</a></li>
      <li ng-class="{selected:tab.getTab(2)}"><a href="#cd-assessor" ng-click="tab.setTab(2)">Assessor Sign up</a></li>
      <li ng-class="{selected:tab.getTab(3)}"><a href="#cd-candidate" ng-click="tab.setTab(3)">Employer Sign up</a></li>
    </ul>
  </section>
</div>

使用 angularjs 打开菜单列表中的选定选项卡

opening selected tab in list of menu using angularjs

angularjs

ng-class