Angular ng-class doesn't add dynamic class to element

Question

I'm having trouble grasping that when item.dynamicClass = 'article' why

<div class="type" ng-class="{{ item.dynamicClass }}">

doesn't return a div like:

<div class="type article">

but instead returns:

<div class="type" ng-class="article">

The only way I've been able to get this work is by doing

<div class="type" ng-class="itemClass(item.dynamicClass)">

// Controller
$scope.itemClass = function(type) {
  return type;
};

I would like a solution which doesn't involve the controller

Jason Goemaat · Accepted Answer · 2013-11-26 19:58:46Z

3

I don't think you need the binding braces. What is passed to ng-class is an expression that evaluates to a result, not something to bind (fiddle):

<div class="type" ng-class="item.dynamicClass">

answered Nov 26, 2013 at 19:58

Jason Goemaat

29.3k15 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marius Miliunas Over a year ago

Thanks, I thought I tried that but I guess not. Also doing class="type {{ item.dynamicClass }}" didn't feel right either.

Collectives™ on Stack Overflow

Angular ng-class doesn't add dynamic class to element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related