Question

我正在创建一个导航结构。我尝试使用AngularStrap和Bootstrap，但只要我将它们注入我的应用程序，Angular就会失败。我发现了这个link并构建了我的导航标签栏。我喜欢定制的容易程度。我的问题是，我不知道如何在角度中应用选定选项卡的CSS。我无法有条件地将id应用于元素，当我尝试将css分解为多个类时，选项卡不会以相同的方式显示。

<ul class="tablist">
    <li ng-repeat="tab in tabList" ng-click="setSelected($index);">
        <a href="javascript: void(0);">{{tab.title}}</a>
    </li>
</ul>

vs.

<ul class="tablist">
    <li id="selectedTab"><a href="javascript: void(0);">Admin</a></li>
</ul>

应用所选格式的最佳方法是什么？有关更加充实的示例，请参阅此Fiddle。

Answer 1

更新：http://jsfiddle.net/dLemh/6/

要使用背景颜色更改，请在课程中使用css

 ng-class="{selected: isSelected(tab)}"

 $scope.currentSelectedTab = {};
    $scope.setSelectedTab = function(tab){
        $scope.currentSelectedTab = tab
    }

    $scope.isSelected = function(tab){
        if(tab == $scope.currentSelectedTab){
        return true;
        }

        return false;
    }

如果有的话请告诉我

Answer 2

我找到this SO帖子，我可以使用并修复CSS格式的优先级。

.tablist li.selectedTab a {
    background: none;
    border: 2px solid #6B74C6;
    border-bottom: 0px;
    background-color: #F3F3F3;
    color: #0378D9;
    text-decoration: none;
}

<ul class="tablist">
    <li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
        <a href="javascript: void(0);">{{tab.title}}</a>
    </li>
</ul>

AngularJS表格导航选择的样式

2 个答案: