I am using a directive and want to use ng-class in a way that I could output multiple classes (which are stored in a variable) under certain condition.
<div ng-if="showIcons" ng-class="{state.icon: showIcons}"></div>
$scope.state = {
icon: 'icon-cross-outline color-brand-danger'
};
Unfortunately this is not working.
Using ternary operator in ng-class, could you try the following?
<div ng-if="showIcons" ng-class="showIcons ? state.icon : null"></div>
state.icon a String? Are you sure your classes exists in CSS? Play with my Plunker, maybe you will fix your issue from it. :-)state.icon :) Will do.You can do more complicated stuff via binding a function to the ng-class see my plnker
JS:
var app = angular.module('hey', []);
app.controller('TheController', [function () {
this.title = "hey"
this.shouldApply = true;
this.canApplyClass = function () {
if (this.shouldApply == true) {
return 'happy sad other';
}
return '';
}
}]);
HTML:
<body ng-app="hey">
<div ng-controller="TheController as c">
<h1 ng-class="c.canApplyClass()">{{c.title}}</h1>
</div>
</body>
I prefer this approach because you can get complicated in the function - and even have access to other services.
