How do I bind this scope variable to a ng-class attribute?

Question

This seems like it should be fairly straightforward, however I'm absolutely out of options

In my view I have:

<div>{{selectedTheme.theme}}</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent"></ion-nav-view>

where the first div outputs the class as expected. However, I cannot get the class to get inserted into the ion-nav-view element!

The resulting mark-up is as follows:

<div class="ng-binding">Dark</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">></ion-nav-view>

Any input at all would be immense!

PS: In addition, setting it simply with class works fine.

I say you should go for a directive here and use `element.addClass()`. You should take a look at [this question too](http://stackoverflow.com/questions/14643836/dynamic-class-in-angular-js) — Dan Mindru, Mar 14 '15 at 23:55
@JamesP, that is just not correct. `ng-class` accepts an expression that if evaluated to string of space-delimited class names or an array, uses these values as is. Only, when the expression is an object, the property is used as a class if it has a truthy value — New Dev, Mar 15 '15 at 00:31
if you just want the name of the class add {{}} and your good, Like : `ng-class="{{selectedTheme.theme}}"` — Neta Meta, Mar 15 '15 at 00:46

score 3 · Accepted Answer · answered Mar 15 '15 at 00:45

In Angular ng-classuses an expression or just a plain old string. You can do things like:

Add/Remove classes based on Angular variables
Add/Remove classes based on evaluated expressions
Bind single or multiple classes based on dynamic data

You can just add an Angular variable to ng-class and that is the class that will be used for that element. So in your case, if selectedTheme.theme yields the exact class name you wish to use, then it should work fine.

<ion-nav-view ng-class="varHoldingClassName" name="menuContent"></ion-nav-view>

So here's a full example in action:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Angular!';
    $scope.selectedTheme = {
         'coalTheme': 'textColor'
    };
}

.textColor{
    color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <div ng-class="selectedTheme.coalTheme">Hello, {{name}}!</div>
</div>
</div>

How do I bind this scope variable to a ng-class attribute?

1 Answers1