Question

我目前正在设置标签角度指令的样式。我正在尝试设置一个活动选项卡并取消选择所有其他选项卡。但是，我没有运气。我尝试过使用bootstrap托管的css，但这并没有解决问题。我不知道从哪里开始，但正确方向的一点将有所帮助。

我做了一个Plunker来证明我的问题： http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview

以下代码：

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl" class="smooth_transition">
<tabset>
  <tab heading="test1" >
    <div class="tab-body" >
        test1 should be red
        <br/>
        test2 should be white
    </div>
  </tab>
  <tab heading="test2">
    <div class="tab-body" >
        test1 should be white
        <br/>
        test2 should be red
    </div>
  </tab>
</tabset>
</body>
</html>

app.js

var app = angular.module('plunker',["ngAnimate"]);

app.controller('MainCtrl', function($scope) {
   $scope.name = 'World';
})
.directive('tab', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div role="tabpanel" ng-show="active" ng-transclude  class="smooth_transition"></div>',
        require: '^tabset',
        scope: {
            heading: '@'
        },
        link: function (scope, elem, attr, tabsetCtrl) {
            scope.active = false;
            tabsetCtrl.addTab(scope)
        }
    }
})
.directive('tabset', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'tabset.html',
        bindToController: true,
        controllerAs: 'tabset',
        controller: [ function () {
            var self = this;
            self.tabs = [];
            self.addTab = function addTab(tab) {
                self.tabs.push(tab);

                if (self.tabs.length === 1) {
                    tab.active = true;
                }
            };
            self.select = function (selectedTab) {
                angular.forEach(self.tabs, function (tab) {
                    if (tab.active && tab !== selectedTab) {
                        tab.active = false;
                    }
                });
                selectedTab.active = true;
            };
        }]
    };
});

tabset.html

<div role="tabpanel" class="smooth_transition">
  <ul class="nav nav-tabs" role="tablist" class="smooth_transition">
    <li role="presentation"
        ng-repeat="tab in tabset.tabs" class="smooth_transition">
        <a href=""
           role="tab"
           ng-click="tabset.select(tab)">{{tab.heading}}</a>
    </li>
  </ul>
  <ng-transclude>
  </ng-transclude>
</div>

的style.css

.smooth_transition.ng-hide {
    opacity: 0;
}

.smooth_transition.ng-hide-add {
    position: absolute;
    width: 100%;
}

.smooth_transition.ng-hide-remove {
    transition: all linear 1s;
    position: absolute;
    width: 100%;
}

/*nav css*/
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    height: 50px;
}

.nav > li {
    position: relative;
    display: block;
}

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

.nav-tabs {
    width: 100%;
}

.nav-tabs > li {
    background: white;
    border: solid 1px black;
    float: left;
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.tab-body {
    width: 100%;
    border: solid 1px black;
}

.nav-tabs > li > a .active {
    background: red;
}

Answer 1

在您的情况下，您可以将ng-class="{active:tab.active}"添加到要突出显示的元素，以便<li>或<a>。

例如......

<ul class="nav nav-tabs" role="tablist" class="smooth_transition">
    <li role="presentation"
        ng-repeat="tab in tabset.tabs" class="smooth_transition" 
        ng-class="{active:tab.active}">
        <a href=""
           role="tab"
           ng-click="tabset.select(tab)">{{tab.heading}}
         </a>
    </li>
</ul>

然后改变你的CSS ......

.nav-tabs > li > a.active {
  background : red;
}

或者

.nav-tabs > li.active {
  background : red;
}

希望这有帮助！

angularui标签设置活动标签及其css

1 个答案: