AngularJS表格导航选定样式

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

<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以获取更丰富的示例。

来源

2014-02-26 C1pher

我发现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>

来源

2014-02-26 20:40:01 C1pher

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

更新时间：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; 
    }

请让我知道如果有什么

来源

2014-02-26 20:04:26 madhured

所以我可以把边框放在它的周围，但是我不能让选定的选项卡从蓝色背景上的白色文本转到灰色背景上的蓝色文本？ – C1pher

你可以做到这一点，我更新了CSS属性。选择一个{}并使用重要的。请检查并让我知道如果有什么东西 – madhured

+1的工作解决方案。我也想出了一个你可能想看的解决方案。我听说过建议不要使用'！important'，除了测试CSS优先级。 – C1pher

AngularJS表格导航选定样式

回答

相关问题