根據角度範圍值更改CSS

Question

我試圖根據角度範圍變量更改我的CSS。讓我這樣解釋我的自我。

$scope.entries = [{ 
    status: 'denied' 
} 

我需要這樣做，以便元素的狀態更改元素的背景：如果狀態被拒絕，紅色等等。

Answer 1

你可以這樣做這樣，如果你不想使用納克級

<span class="status-{{var}}"></span> 

CSS

.status-denied{ 
    background: red; 
} 

Answer 2

在您看來，您可以通過使用ngClass指令有條件地將類應用於您的html元素。 Documentation here。

你會想創建一個你想要的樣式的css類，然後在滿足某些條件時使用ng-class中的表達式來應用那個類。

從文檔的一個例子：

CSS

.base-class { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.base-class.my-class { 
    color: red; 
    font-size:3em; 
} 

查看

<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> 
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> 
<br> 
<span class="base-class" ng-class="myVar">Sample Text</span> 

Plunker from docs