2015-04-09 20:36:17 +02:00
|
|
|
# .cadoles-slide-title[Les directives de base (4/5)]
|
2015-04-08 23:22:53 +02:00
|
|
|
|
2015-04-09 20:36:17 +02:00
|
|
|
**Modification dynamique du style: `ng-class`**
|
2015-04-08 23:22:53 +02:00
|
|
|
```html
|
|
|
|
|
<html>
|
|
|
|
|
<body ng-app="myApp">
|
|
|
|
|
|
2015-04-09 20:36:17 +02:00
|
|
|
<style>
|
|
|
|
|
.red { color: red; }
|
|
|
|
|
.blue { color: blue; }
|
|
|
|
|
.xxl { font-size: 50px; font-weight: bold; }
|
|
|
|
|
</style>
|
|
|
|
|
<div ng-controller="MainCtrl" ng-init="iLoveBlue=true; iLoveRed=false; myClasses=['red', 'xxl']">
|
2015-04-08 23:22:53 +02:00
|
|
|
|
2015-04-09 20:36:17 +02:00
|
|
|
<span ng-class="myClasses">Rouge et large</span>
|
|
|
|
|
|
|
|
|
|
<span ng-class="{'red': iLoveRed, 'blue': iLoveBlue}">Bleu</span>
|
2015-04-08 23:22:53 +02:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<script src="angular.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
