javascript - Using class with angular vs ng-class while using a mixed expression - Stack Overflow

admin管理员组

文章数量:1193364

I have a div that I want to give a dynamic class with AngularJS.

The div is withing an ng-repeat statement where lang.prefix is first en then sv

Using the following code works and sets the class to i-flag-en than i-flag-sv, but is it correct?

<div class="float-left flag i-flag-{{lang.prefix}}"></div>

I know there exist a ng-class directive which can be used to dynamically set the class of an element with AngularJS.

I think I read somewhere in a book, that the normal class directive not should be used to set the class property dynamically with AngularJS because of the way Angular manipulates the dom.

However, the following code does not work:

<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>

and I rather want to set the class in this way instead of creating another scope variable.

Is it bad practice to use the class attribute with AngularJS to dynamically set the class? Does it work all the time even if it would be bad practice?

I have a div that I want to give a dynamic class with AngularJS.

The div is withing an ng-repeat statement where lang.prefix is first en then sv

Using the following code works and sets the class to i-flag-en than i-flag-sv, but is it correct?

<div class="float-left flag i-flag-{{lang.prefix}}"></div>

I know there exist a ng-class directive which can be used to dynamically set the class of an element with AngularJS.

I think I read somewhere in a book, that the normal class directive not should be used to set the class property dynamically with AngularJS because of the way Angular manipulates the dom.

However, the following code does not work:

<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>

and I rather want to set the class in this way instead of creating another scope variable.

Is it bad practice to use the class attribute with AngularJS to dynamically set the class? Does it work all the time even if it would be bad practice?

• javascript
• css
• angularjs

Share Improve this question Follow asked Aug 1, 2014 at 22:04 user264230user264230 65033 gold badges77 silver badges1919 bronze badges 1

• 1 Ok this is from my experience, I'm not too informed on the inner workings of angular DOM manipulation. I'm not sure it's considered bad practice to use class={{}}, I use it a lot and have not found it to cause me any problems (so far). Use ng-class whenever you want to set a class conditionally, or when you expect the class to change, use class="{{}}" whenever you want to dynamically evaluate the classes and don't expect the expression resulting in the class to change. For example to return a string of classes from a function: class={{generateClassBasedOnProductType()}}. – ms87 Commented Aug 1, 2014 at 22:43

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 26

The book you have mentioned may have talked about the problems of using ng-class and class {{}} interpolations together wherein updates in the interpolation removes the ng-class classes, this problem has already been resolved, reference. Thus, using interpolation within class attributes is totally fine, and does not break good practice because both has its own quirks.

Your usage of ng-class however is incorrect, you have to concatenate the literal string value with your scope string variable:

<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>

but I think it is much preferable to use your first example instead:

<div class="float-left flag i-flag-{{lang.prefix}}"></div>

本文标签： javascriptUsing class with angular vs ngclass while using a mixed expressionStack Overflow