Class directive not working when using ng-class with condition

Question

I tried to load the directive as below but it is not working.

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div>

It works fine if I just assigned it to a class like this:

<div class="nav-dropdown"> </div>

EDIT:

When using this method:

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div>

The class is added inside html as

<div class="nav-dropdown"> </div>

The main problem is : the directive doesn't show up as

 <div class="nav-dropdown"><div>This is directive template</div></div>

What I want to do is load the directive with a condition: dt.url is null. Anyone can help?

Answer 1

You can use ternary expression

<ng-class="condition ? 'true' : 'false'"></div>

So, instead use this:

<div ng-class="{'nav-dropdown' : dt.url == null }"> </div>

You could use this: (This works for me)

<div ng-class="dt.url == null ? 'nav-dropdown' : ''"></div>