根据条件angularjs应用css

时间:2016-06-01 14:12:51

标签: javascript css angularjs

我使用ng-click和ng-show在angularjs中的两个窗口之间交替:

<div ng-init="showTab2 = false">
            <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
        </div>
 <div ng-init="showTab2 = true">
            <a ng-click="showTab1 = true; showTab2 = false">#Tab2</a>
        </div>

然后用ng-show它们出现

您能否告诉我如何更改所选标签的颜色?

谢谢

2 个答案:

答案 0 :(得分:1)

我不确定您的ng-show如何适合此处,但使用ng-class来切换css:

<a ng-class = "{'some-class': showTab1}" 
  ng-click="showTab1 = true; showTab2 = false">#Tab1</a>

答案 1 :(得分:1)

请在此处查看工作示例:Example

JS

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

app.controller('MainCtrl', function($scope) {
    $scope.showTab = 1; //If you want to select default tab
});

HTML

<div>
    <a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
   <a ng-click="showTab = 2"  ng-class="{'active': showTab == 2}">#Tab2</a>
</div>

<div ng-switch="showTab">
    <span ng-switch-when="1">Tab1</span>
    <span ng-switch-when="2">Tab2</span>
</div>

CSS

.active {
   color: red;
 }