Ng-class isn't working for my app

ionic-v1
1 
   <i class="icon ion-ios-close-outline" **ng-class="hello"**></i>

I added ng-class and I was hopping to see ‘hello’ in the class attribute. But it doesn’t seem to work.

Do I need any dependencies for this ?

2

So I think you might be a little confused on how the ng-class works.

If you want to just add hello as a class, you would just put with the other classes after ion-iso-close-outline.

ng-class is awesome for conditionals though. I use it to show/hide different parts of the user interface depending on what the user is doing or has done.

A very basic example to get you started:

In my scope I’ll define the variable that will tell my html whether to use the class or not.

$scope.useClass = false;

Then in my HTML it would look like this:

<i class="icon ion-ios-close-outline" ng-class="{ 'hello' : useClass }"></i>

So you pass ng-class an object and the property name is the class name, and then useClass will tell ng-class to apply or take off that class. The angular documentation has some great resources on this as well.

2 Likes
3

Hey !!! Thanks !!! I think I asked the question the wrong way , you actually answer what my problem was. Do you know any other good resources that I can read that uses ng-class different ways ?

Thanks

4

If you have

$scope.someBooleanFlag = true

You can also use ng-class like this:

<div ng-class="someBooleanFlag ? 'class1' : 'class2' ">

Attention: You can is not the same as you should. It’ll become ugly really fast if you start adding more classes and tests there with nested ternary operators.

I’d recommend sticking with using it the way shown by @nnnnnorthhhhh.

2 Likes
5

Though Nuba’s way is still really handy, I’ve had to use that a couple of times. It’s great for toggling between to classes like colors, or default animations even.

2 Likes
6

Great thread - I never knew ng-class existed. Much cleaner than ng-if/ng-show etc I am using to achieve the same thing

2 Likes
7

You got that right! Haha I didn’t know about it for a while either. The angular docs are filled with a bunch of hidden gems like that.

8

Well, not quite the same thing… :stuck_out_tongue: The element won’t even be there if ng-if evaluates to false. Also angular’s ng-if, ng-show and some others are ngAnimate-aware. For an example of what this means, check http://codepen.io/ionic/pen/uJkCz