Angularスコープの値に応じてCSSを変更してください

Question

角度スコープの変数に基づいてCSSを変更しようとしています。このように私の自己を説明させてください。

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

私は、要素のステータスは要素の背景を変更するようにそれを行う必要がありますように、ステータスが拒否された場合、赤、、と。

Answer 1

あなたはそれを行うことができますこのように、あなたはNG-クラス

<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