0

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Isidoro Barrera
  • 95
  • 1
  • 11
  • check this answer http://stackoverflow.com/questions/38974896/call-child-component-method-from-parent-class-angular-2/38974968#38974968 – rashfmnb Aug 24 '16 at 18:34
  • use ng-class https://docs.angularjs.org/api/ng/directive/ngClass – Arun Raj Aug 24 '16 at 18:36

2 Answers2

2

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>

Plunker from docs

I think I can code
  • 647
  • 1
  • 6
  • 18
0

You can do it like this if you dont want to use ng-class

<span class="status-{{var}}"></span>

css

.status-denied{
  background: red;
}
Keff
  • 989
  • 7
  • 27