css - AngularJS 表格导航选择样式

标签 css angularjs

我正在创建一个导航结构。我尝试使用 AngularStrapBootstrap ,但是当我将它们注入(inject)我的应用程序时,Angular 就失败了。我找到了这个 link并构建了我的导航标签栏。我喜欢定制是多么容易。我的问题是,我不知道如何以 Angular 为选定的选项卡应用 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一个更充实的例子。

最佳答案

更新: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 - AngularJS 表格导航选择样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22051260/

相关文章:

javascript - 如何创建 svg sprite 然后获取每个 svg 的坐标?

javascript - 这个弹出窗口是如何出现并在一段时间后消失的

angularjs - 使用 ng-repeat 和 ng-include 创建递归表

angularjs - 如何用 Angular Material 实现经典的 "sticky footer"?

HTML文本区域定位与CSS

html - 如果对象重叠,带有嵌套 float div 的父级负边距将不会跟随父级

javascript - 如何在angularjs中保持选中的下拉项

javascript - 要求组件的指令 Controller 返回一个空 Controller

javascript - 从输入中获取值 (AngularJS)

ruby-on-rails - Rails 3 中的移动风格切换,辅助方法与媒体查询