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.

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.

• javascript
• angularjs
• ionic-framework

• I say you should go for a directive here and use element.addClass(). You should take a look at this question too – Dan Mindru Commented Mar 14, 2015 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 Commented Mar 15, 2015 at 0:31
• 1 if you just want the name of the class add {{}} and your good, Like : ng-class="{{selectedTheme.theme}}" – Neta Meta Commented Mar 15, 2015 at 0:46

1 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./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>