CODEWITHSUNDEEP
angularjs
jgravois
jgravois

Reputation: 2579

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

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?

Upvotes: 0

Views: 2003

Answers (1)

Michelle Tilley
Michelle Tilley

Reputation: 159095

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()}">

Upvotes: 1

Related Questions