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.

Answer 1

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

1. Add/Remove classes based on Angular variables
2. Add/Remove classes based on evaluated expressions
3. 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>