AngularJS: Using class and ng-class in the same element and other unsuccessful attempts

Question

I have the div below which HAS to have the frmBar class assigned and also a second class depending on the value of Request_Type (SAP - clr-purple, WEB - clr-darkblue, and three others).

When I try either of the following, neither class is assigned.

<div ng-class="{frmBar SAP:'clr-purple', Web:'clr-darkblue'}[myrequest.request_type]">

<div ng-class="{SAP:'frmBar clr-purple', Web:'frmBar clr-darkblue'}[myrequest.request_type]">

This one applies frmBar but not the ng-class:

<div class="frmBar" ng-class="{SAP:'clr-purple', Web:'clr-darkblue'}[myrequest.request_type]">

Any thoughts?

Michelle Tilley · Accepted Answer · 2014-05-14 03:49:23Z

1

ng-class's object form takes an object where the keys are the class names and the values are boolean expressions that say whether to apply that class.

<div class="frmBar" ng-class="{SAP: myrequest.request_type == 'SAP', Web: myrequest.request_type == 'Web'}">

The values of the object can be scope values, so you could, for instance, have:

app.myController = function($scope) {
  $scope.isSAP = function() {
    return $scope.myrequest.request_type == 'SAP';
  };

  $scope.isWeb = function() {
    return $scope.myrequest.request_type == 'Web';
  };
}

and

<div class="frmBar" ng-class="{SAP: isSAP(), Web: isWeb()}">

edited May 14, 2014 at 3:49

answered May 14, 2014 at 3:31

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jgravois Over a year ago

wouldn't changing it in the controller affect the ng-model in the form? The reason I am trying to do it in the html is because this is just for styling and the value might be changed in the form. Also, I tried your html code and it is still just applying frmBar

Michelle Tilley Over a year ago

I'm not sure what you mean by "changing it in the controller." Since the code from the question only had a bit of HTML, I made something up--but you can use any scope value from the controller you want (e.g. you can set boolean properties when it first loads, etc.) Here's an example: jsfiddle.net/BinaryMuse/GX4AL

jgravois Over a year ago

OK. I see you're not changing the model because Request_Type can still be changed. Your creating new scope variables to style ... now that it makes sense to me, I'll try that way because the inline isn't working (I was using this fiddle (jsfiddle.net/BinaryMuse/GX4AL) and it worked for him ... damn!

Michelle Tilley Over a year ago

It's a little verbose, but here's an example of how you would do it with the boolean expressions inline: jsfiddle.net/BinaryMuse/8by93

Michelle Tilley Over a year ago

Here it is: jsfiddle.net/BinaryMuse/Ls3e2 (1) The JS in the controller was not valid; (2) Object keys with dashes in them need to be quoted.

|

Collectives™ on Stack Overflow

AngularJS: Using class and ng-class in the same element and other unsuccessful attempts

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related