object property value as class name, ng-class

Question

Tried looking for an answer to this with no success.

Is there anyway to have the value of a property be the class name when using ng-class in angularJS?

An example of what I mean:

var things = [
        {
            a: "abc",
            aTrue: true
        }
];

Then in Angular (using ng-repeat in this instance)

<div ng-repeat="thing in things" ng-class="{thing.a: !!thing.aTrue}></div>

I'm looking for the class name to be "abc" - but this gives me a class name of "thing.a". Is this even possible, where am I going wrong?

Thanks in advance, your help is appreciated.

iConnor · Accepted Answer · 2013-09-13 14:08:00Z

8

The reason that doesn't work is because it acts just like a Javascript object so you can't do this in javascript can you

var test = 'hello';

var object = {
    test: 'hi'
};

object[test] === undefined // true // or
object.hello === undefined // true 
object.test  === undefined // false

So you can't create a key with a variable like that. so try something like this.

 ng-class="{ true: thing.a, false: '' }[thing.aTrue]"

Demo: http://jsfiddle.net/XzXzR/1/

what this does is this (explanation in javascript)

var test = {
   one: 'hello',
   two: 'world'
}['one'];

What does test equal?

test ===  Object {one: "hello", two: "world"} // false
test ===  Object {one: "hello"} // false
test ===  Object {two: "world"} // false
test === 'one'   // false
test === 'two'   // false
test === 'hello' // ** true **
test === 'world' // false

edited Sep 13, 2013 at 14:08

answered Sep 13, 2013 at 13:43

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

object property value as class name, ng-class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related