CODEWITHSUNDEEP
angularjs
Foo L
Foo L

Reputation: 11137

ngClass style with dash in key

I hope this saves someone a headache with styles that use dashes, especially since bootstrap has become so popular.

I am using angular 1.0.5 by way of

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

In the ngClass documentation, the example is simple, but it also mentions the expression can be a map of class names to boolean values. I was trying to use the "icon-white" style on my icon as shown in the bootstrap documentation, depending on a boolean variable.

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

The line above does not work. The class is not appended with icon-white when someBooleanValue is true. However, if I change the key to iconWhite, it is successfully added to the list of class values. How would one add a value with a dash?

Upvotes: 169

Views: 31934

Answers (3)

Foo L
Foo L

Reputation: 11137

After hours of hacking around, it turns out the dash gets interpolated! Quotes are needed.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

UPDATE:

In older versions of Angular, using a backslash also does the trick, but not in the newer versions.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

The former is probably preferred, since you can more easily search for it in your favorite editor.

Upvotes: 372

zloctb
zloctb

Reputation: 11177

alternative for uses ng-class : 

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>

Upvotes: 0

Bromoxid
Bromoxid

Reputation: 131

\'icon-white\' works as well (with AngularJS 1.2.7)

Upvotes: 11

Related Questions