AngularJS: different types of ng-class & class

by tedbeer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script>
<div 
    ng-controller="MainCtrl"
    class="just-a-class"
    ng-hide="data.size > 10"
>
1. Must be hidden - simple class
</div>
<hr />
<div 
    ng-controller="MainCtrl"
    class="just-a-class color-{{ data.color }}"
    ng-hide="data.size > 10"
>
2. Must be hidden - one expression
</div>
<hr />
<div 
    ng-controller="MainCtrl"
    class="just-a-class {{'color'}}-{{ data.color }}"
    ng-hide="data.size > 10"
>
3. Must be hidden - two expressions
</div>

SCSS

.color-red { background: red;}

.font-small { font-size: 1em; }
.font-large { font-size: 3em; }

.no-red { color: Green; }

JavaScript

var app = angular.module("app", []);

app.controller('MainCtrl', function ($scope) {

    $scope.data = {
        color: "red",
        size: 20
    };

});