CSS를 angularjs로 동적으로 재정의 할 수 있습니까?

Question

부트 스트랩 탭이 있는데 서버 (각 데이터 세트의 색상 코드)에서받은 데이터를 기반으로 활성 탭에 일부 CSS 속성을 할당하려고합니다. 활성 탭에 대해 angularjs를 사용하여 테두리 색상에 대한 css 값을 재정의하려면 어떻게합니까?

<div class="tabbable tabs-left"> 
<!--style for the tabs border --> 
    <ul id='myTabs' class="nav nav-tabs" ng-style="{'border-right-color':[currentData.colorCode]}"> 
    <!-- Active tab --> 
     <li ng-class="getTabClass(0)" ng-click="setActiveTab(0)" class="active"><a href="#tab0" data-toggle="tab">Set 1</a></li> 
     <li ng-class="getTabClass(1)" ng-click="setActiveTab(1)" ><a href="#tab1" data-toggle="tab">Set 2</a></li> 
     <li ng-class="getTabClass(0)" ng-click="setActiveTab(2)"><a href="#tab0" data-toggle="tab">Set 3</a></li> 
     <li ng-class="getTabClass(1)" ng-click="setActiveTab(3)" ><a href="#tab1" data-toggle="tab">Set 4</a></li> 
    </ul> 

CSS 코드 :

.tabs-left>.nav-tabs .active>a, .tabs-left>.nav-tabs .active>a:hover, .tabs-left>.nav-tabs .active>a:focus { 
border-color: #ddd transparent #ddd #ddd; 
} 
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { 
} 

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { 
color: #555; 
cursor: default; 
background-color: #fff; 
border: 1px solid #ddd; 
border-bottom-color: transparent; 
} 
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { 
color: #555555; 
background-color: #ffffff; 
border: 1px solid #ddd; 
border-bottom-color: transparent; 
cursor: default; 
} 

Answer 1

변경

ng-style="{'border-right-color':[currentData.colorCode]}"> 

ng-style="{'border-right-color':'{{currentData.colorCode}}'}"> 

,691 여기

은 HTML과 CSS 코드

데모 : http://jsfiddle.net/aykw1ufe/