dynamically change a html element's class by angualrjs

Question

I'm trying to change some html elements' class attribute by AngularJs' $scope value. But it seems I can't.

<div class="{{object.someAtrribute}} > Content </div>

So, how can i do this actually?

Thanks.

Answer 1

You want to use the ng-class directive. It takes an object with a set of class names and boolean expressions:

<div ng-class="{'class-name': boolean}"></div>

So, in your example, you can do something like this:

<div ng-class="{'larger-than-content': item.foo > content}"></div>

Since this is an object, you can add several classes:

<div ng-class="{'one': foo == 1, 'two': foo == 2, 'three': foo == 3}"></div>

Note: The quotes on the class names are not necessary, although I often have dashes in my class-names. In that case, the quotes are necessary (you are describing a JS object), so I tend to use them always for consistency.