3

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.

Improve this question

1 Answer 1

Reset to default
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.

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

4 Comments

Could you please show me what ng-class="[style4, {true: 'orange'}[warning]]" would mean for my example?
@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
Tried ng-class="[{ true: 'lead'}[conditionlead == true], classname ]". It works. Great. Could you please tell me why?
It is actually just basic javascript using bracket notation to get the value of a property. so {true: 'orange'}[true] will return orange

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.