angularjs ng-class not working when expression = array with object and string

Question

I don't know if it's now for the sake of it, but i am stuck with a statement in the AngularJS documentation:

https://docs.angularjs.org/api/ng/directive/ngClass

"... If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear..."

"...<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>..."

If you see my example on http://jsfiddle.net/angelinena/9p4k4wnx/5/ it works in all combinations, but not as an array with object and string in it.

<p><button class="btn btn-default" ng-click="conditionlead=true; classname='text-info'">Both 2</button></p>
<p ng-class="[{ 'lead': conditionlead == true }, classname ]">Classes applied as array with object and string</p>

Could you please tell me what i am doing wrong? Would be very grateful.

PSL · Accepted Answer · 2015-11-02 15:53:40Z

4

With array of object you need to evaluate the expression on your own (If you are not using angular 1.4+), Assuming warning holds true value, you could do.

 ng-class="[style4, {true: 'orange'}[warning]]"

Or just use a mix of ng-class and class. i.e

 <p class="{{style4}}" ng-class="{orange: warning}">

You might be referring to the latest documentation (1.4+) and using an older version of angular. You can either upgrade the version of angular to atleast 1.4 or manually evaluate the expression.

older documentation states:

If the expression evaluates to an array, each element of the array should be a string that is one or more space-delimited class names.

edited Nov 2, 2015 at 15:53

answered Nov 2, 2015 at 15:48

PSL

124k21 gold badges257 silver badges243 bronze badges

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

4 Comments

Anja Over a year ago

Could you please show me what ng-class="[style4, {true: 'orange'}[warning]]" would mean for my example?

PSL Over a year ago

@Anja WHat is your case? if warning holds the value true, false, my example will work. WHat version of angular you are using btw. Sorry i cant access fiddle

Anja Over a year ago

Tried ng-class="[{ true: 'lead'}[conditionlead == true], classname ]". It works. Great. Could you please tell me why?

PSL Over a year ago

It is actually just basic javascript using bracket notation to get the value of a property. so {true: 'orange'}[true] will return orange

Collectives™ on Stack Overflow

angularjs ng-class not working when expression = array with object and string

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related