I've got an array of object where each has a color variable ('success', 'danger', 'info'). I have to apply them on panels, texts and buttons, just like that:
<div class="panel" ng-class="panel-{{panel.color}}"></div>
<button class="btn" ng-class="btn-{{panel.color}}"></div>
<p ng-class="text-{{panel.color}}"></p>
Of course, this solution doesn't work.
The reason why this code ng-class="panel-{{panel.color}}" doesn't work is that you are confusing ng-class directive which accepts variables names without doubles curly braces and class attribute which requires doubles curly braces around the variables names.
There are two ways to do it :
One way with ng-class :
<span ng-class="'panel-'+panel.color">panel {{panel.color}}</span>
Another one with class :
<span class="panel-{{panel.color}}">panel {{panel.color}}</span>
There are many ways to use ngClass.
You can pass an array of class names :
<span ng-class="['panel-'+panel.color, 'panel-'+panel.primary]">panel </span>
Or you can conditionally add classes :
<span ng-class="{'panel-red' : panel.isRed, 'panel-primary': panel.isPrimary}">panel</span>
Or use ternary operator :
<span ng-class="panel.isRed ? 'panel-red' : 'panel-not-red'">panel</span>
You need to use ngClass like this:
<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?
<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">
or
ng-class="x > 4 ? 'success' : 'danger'">
Instead of x >4 put your condition
Here you can find lot's of real examples: https://scotch.io/tutorials/the-many-ways-to-use-ngclass
ng-classcorrectly, should read about ngClass API here: docs.angularjs.org/api/ng/directive/ngClass. Otherwise useng-attr-class.ng-classis useful if you want to add and remove classes dynamically, but if you just want to interpolate a variable useclass.