通過AngularJS可以在應用中動态地設定CSS類和樣式，隻要使用{{}}插值文法把它們進行資料綁定即可。甚至還可以在模闆中構造CSS類名和部分比對方式。
執行個體如下：
ControllerCSS.html
<html ng-app='myApp'>
<head>
<title>CSS執行個體</title>
</head>
<body>
<div ng-controller='CSSController'>
<ul>
<li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li>
<li>Fly</li>
<li>Start</li>
</ul>
</div>
<script src="lib/angular/angular.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css" target="_blank" rel="external nofollow" />
<script>
var myApp=angular.module('myApp',[])
myApp.controller('CSSController', function($scope) {
$scope.isDisabled = false;
$scope.stun = function() {
$scope.isDisabled = 'true';
}
});
</script>
</body>
</html>
menu.css
.menu-disabled-true {
color: gray;
} 運作結果：打開頁面時，Stun是激活的，點選後就置灰了，如下截圖
stun菜單項上的CSS類将會被設定為menu-disabled-加上$scope.isDisabled的值。由于$scope.isDisabled屬性的初始值為false，是以拼接出來的結果就是menu-disabled-false。由于這個結果無法比對到任何CSS樣式，是以不會産生任何效果。當$scope.isDisabled被設定為true時，CSS樣式類就變成了menu-disabled-true，這樣就會調用相應的樣式讓文本變成灰色。
當使用插值方式綁定内聯樣式的時候，這一技術同樣适用，例如style="{{someexpression}}"。
雖然這種方式具有很大靈活性，但是也有一些不利的地方，那就是構造CSS類名時存在一定程度的間接性。雖然在這個小例子裡面很容易了解它，但是當需要同時要模闆和JavaScript中使用時，它很快就會變得無法維護，進而無法正确的建立CSS。
正是這個原因，Angular提供了ng-class和ng-style指令。這兩個指令都可以接受一個表達式，表達式執行的結果可能是如下取值之一：
a.表示CSS類名的字元串，以空格分隔
b.CSS類名數組
c.CSS類名到布爾值的映射
如希望在應用頭部的固定位置向使用者顯示錯誤和警告資訊。使用ng-class指令，你可以這樣做：
ControllerCSS02.html
<html ng-app='myApp'>
<head>
<title>CSS執行個體2</title>
<link rel="stylesheet" type="text/css" href="css/menu02.css" target="_blank" rel="external nofollow" />
</head>
<body>
<div ng-controller='HeaderController'>
<div ng-class='{error:isError,warning:isWarning}'>{{messageText}}</div>
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('myApp',[])
myApp.controller('HeaderController', function($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning.Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
});
</script>
</body>
</html>
menu02.css
.error {
background-color:red;
}
.warning {
background-color:yellow;
} 運作結果：
點選“Simulate Error”按鈕，效果如下：
點選“Simulate Warning”按鈕，效果如下：
還可以做一些更炫的事情，例如把表格中被選中的行進行高亮顯示。比方說一個名錄，想把使用者點選的那一行進行高亮顯示。
在CSS中，為需要高亮顯示的行設定一個樣式：
menu03.css
.selected {
background-color: lightgreen;
} ControllerCSS03.html
<html ng-app='myApp'>
<head>
<title>CSS執行個體3</title>
<link rel="stylesheet" type="text/css" href="css/menu03.css" target="_blank" rel="external nofollow" />
</head>
<body>
<table ng-controller='RestaurantTableController'>
<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'>
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('myApp',[])
myApp.controller('RestaurantTableController', function($scope) {
$scope.directory = [{name:'The Handsome Heifer',cuisine: 'BBQ'},
{name:'Green\'s Green Greens',cuisine: 'Salads'},
{name:'House of Fine Fish',cuisine: 'Seafood'}];
$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
};
});
</script>
</body>
</html>
運作效果：