I'm trying to change my css based on an angular scope variable. Let me explain my self like this.
$scope.entries = [{
status: 'denied'
}
I need to make it so that the status of the element changes the background of the element: if the status is denied, red, and so on.
In your view, you can conditionally apply classes to your html element by using the ngClass directive. Documentation here.
You'll want to create a css class with the styling that you want, and then apply that class when some condition is met, using an expression inside ng-class.
An example from the documentation:
CSS
.base-class {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.base-class.my-class {
color: red;
font-size:3em;
}
View
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>
You can do it like this if you dont want to use ng-class
<span class="status-{{var}}"></span>
css
.status-denied{
background: red;
}
