AngularJS 表格导航选定样式答案

【问题标题】：AngularJS Tabular Navigation Selected StylingAngularJS 表格导航选定样式
【发布时间】：2014-03-29 20:43:54
【问题描述】：

我正在创建一个导航结构。我尝试使用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 以获得更充实的示例。

【问题讨论】：

标签： css angularjs

【解决方案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;
    }

如果有什么问题请告诉我

【讨论】：

所以我可以在它周围加上边框，但我不能让选定的标签从蓝色背景上的白色文本变成灰色背景上的蓝色文本？
你可以做到，我更新了css属性来.selected一个{}并使用important。请检查并告诉我有什么问题
+1 表示可行的解决方案。我还想出了一个你可能想看看的解决方案。我听说过不要使用 !important 的建议，除非测试 CSS 的优先级。

【解决方案2】：

我发现 this SO Post 我能够使用和修复 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>

【讨论】：

啊！这是一个更好的解决方案，而不是重要的。