Question

我有三个这样的Html标签：

<div class="container" ng-controller="tabCtrl">         
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over1()" href="#!home/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over2()"  href="#!/underwriting">Underwriting</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" ng-click="toggle_over3()" href="#!operations/">Operations</a>
          </li>
        </ul>
    </div>

当我点击标签时，它应该变为活动状态。我试图使用angularjs实现它。我试图以很多方式实现它，但我无法实现它。如果有更好的话，请告诉我。

AngularJS：

app.controller('tabCtrl',function($scope) {
$scope.toggle_over = function(id) {
    // implementation part
    }
});

Answer 1

怎么样？

 <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Home</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Underwriting</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Operations</a></li>
        </ul>

        <div ng-show="tab.isSet(1)"><h4>Home</h4></div>
        <div ng-show="tab.isSet(2)"><h4>Underwriting</h4></div>
        <div ng-show="tab.isSet(3)"> <h4>Operations</h4></div>


    $scope.tab = 1;

    $scope.setTab = function (tabId) {
        this.tab = tabId;
    };

    $scope.isSet = function (tabId) {
        return this.tab === tabId;
    };

Working demo

Answer 2

这是使用angular 1.3的demo，任何版本都可以使用，示例很简单，只使用视图和ng-class

<div class="container" ng-controller="tabCtrl">         
        <ul class="nav nav-pills">
          <li class="nav-item" ng-class="{'active': active===1}">
            <a class="nav-link active" ng-click="active=1;" href="#!home/">Home</a>
          </li>
          <li class="nav-item" ng-class="{'active': active===2}">
            <a class="nav-link active" ng-click="active=2"  href="#!/underwriting">Underwriting</a>
          </li>
          <li class="nav-item" ng-class="{'active': active===3}">
            <a class="nav-link active" ng-click="active=3" href="#!operations/">Operations</a>
          </li>
        </ul>
    </div>

使用AngularJS设置活动选项卡

2 个答案: