Angular ng-class with class

Question

I've found similar questions here but not this and its a most simple use case: using class and ng-class on the same element.

I have a UL generated with ng-repeat. The LI get styling with an .item class and the selected LI gets an .active class added dynamically with ng-class if it's the currently selected LI (user).

If I only use ng-class, it works. But, when I want to add a standard class, it does not.

Whats up? Much thanks ---

This works and the selected LI gets the .active class.

<li ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

This doesn't work:

<li ng-repeat="user in mainList.users" class="item" ng-class="{'active':isCurrentUser(user)}">

Answer 1

试试吧，我已经测试过并且可以正常工作。

<li ng-repeat="user in mainList.users" class="item ng-class:{'active':isCurrentUser(user)}">

Answer 2

I'd guess you're overwriting the class by using class and ng-class. Could you put item: true in the ng-class as a way of getting around that?

Answer 3

Well there is always a workaround :D :

<li  ng-repeat="user in mainList.users" ng-class="{'item' : true, 'active': isCurrentUser(user)}">
   {{user}}
</li>

Im not sure your suppose to have those quotations when your calling the classes in ng-class but if one dosent work check the other. Hope this helped!

Answer 4

if I remember truely, you can do it like this :

<li class="item" ng-repeat="user in mainList.users" ng-class="{'active':isCurrentUser(user)}">

the class suppose to be first. It will work if you dont have the same attributes in both classes.

Also if it doesn't work you can try to do it like this:

<!-- add the text-error class if wrong is true -->
<div class="item ng-class:{ 'text-error': wrong };">Stuff Goes Here</div>

If you still have problems I recommend you to visit this blog : The Many Ways To Use ng-class

enjoy!