javascript - 使用 AngularJS 设置事件标签

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