Question

我有这样的清单。在我的主页上我有三个选项candiatesignup，评估员注册和雇主注册。现在当我点击评估员想要选择评估员。如何使用角度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类

尝试下面，您可能不需要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打开菜单列表中的选定选项卡

1 个答案: