0

My attempts:

<div ng-class="{'test': true}">Static key works fine</div>
<div ng-class="{ ['te'+'st']: true }">How to "Create object with dynamic key in Angular expression"?</div>
<div ng-class="{ 'te'+'st': true }">Attempt #2</div>
<div ng-class="{ `te${'st'}`: true }">Attempt #3</div>

You can view it at this plunk.

Edit 1: To make it crystal clear: I'm not looking for a way how to add dynamically classes on an element. Code above is just a minimal example of what I want to achieve - construct an object in Angular expression with dynamic keys. Consider ng-class to be just some arbitrary directive taking an object as a parameter, it's used just for demonstration and testing.

In JavaScript (ES6) it can be achieved like this: {['te'+'st']: true} which produces object (not string) {test: true}.

In production code first part of expression is variable and the other is string, condition (value) wasn't hardwired true and also object is not composed of just one property. But I don't think it really matters, because question is about object and dynamic keys in ng expression and it IMO implies it's not restricted to only string literals concatenation (it wouldn't be very dynamic, would it).

Improve this question
1
  • see my answer may be it will help you Commented Jan 22, 2016 at 6:42

3 Answers 3

Reset to default
1

See this example may be it will help you http://plnkr.co/edit/MdZN42wJzNB2u8Zvds73?p=preview

<div ng-class="{ {{'te'+'st'}} : true }">How to "Create object with dynamic key in Angular expression"?</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Wow, didn't know one can do such immersion of expressions. It's working nicely, thanks!
1

Not sure what you're trying to attempt, but if you want what you're doing I would instead just drop it in class and not try to use ng-class:

<div class="{{ 'te' + 'st' }}"></div>

This will spit out this:

<div class="test"></div>

ng-class is used more if you have classes that you want to toggle on/off but in your example above they are all set to true so I may be confused but it's probably not what you need.

Improve this answer

5 Comments

But that is a string, not an object. My code in question is not a production one, it's just a minimal example of what I want to achieve - construct an object in ng expression with dynamic keys. ng-class is just some random directive taking a class as a parameter, it's used just for demonstration and testing.
Then please update your example to provide more details.
The code of example is fine, I could copy parts of my previous comment I guess, but it doesn't really change anything about the question. I reworded title to be an exact question to which I'm seeking answer - "How to create object with dynamic key in expression of AngularJS v1?". I have already solved my problem other (probably not that elegant) way, but I'm still wondering if it is possible to construct an object with dynamic keys in ng expression.
Your example being fine is just your opinion. It may be fine for you, but it is not for me to help. If you want dynamic keys on an object you do something like this: ng-class="myObject[DYNAMIC_KEY]" if that or my suggestion doesn't work for you, please provide more details.
Updated Q. I was trying to create an anonymous object which contains dynamic keys, you seem to be describing an access to a property based on dynamic value. I thought my example was good, but I'm no longer sure about that... Thank you for your effort.
0

Take a look at https://code.angularjs.org/1.4.9/docs/api/ng/directive/ngModel in particular the section about Binding to a getter/setter

Ideed, your getter can return an object dynamically, but your example will throw an exception at runtime since ng-class diective does not accept any object as value.

Improve this answer

4 Comments

I'm confused. ng-class does accept object as its value, in my example first line works. Isn't this getter/setter just limited on ng-model? Also it still means constructing an object in native JS, not as an Angular expression. I am asking about how to do in ng expression. I know I can create this object in controller and pass it to a directive. But downsides are manual registration of watches (also watches are recommended to be avoided if possible).
My bad, I wanted to say that ng-class dos not accept ANY object as value. The javascript console when you run your Plunker reads: Token '[' invalid key at column 3 of the expression [{ ['te'+'st']: true }] starting at [['te'+'st']: true }].
if you use getter setter you won't need watches since you can do logic in the getter setter function directly
Oh, I see. It is a bit better solution than using watches, thank you for the tip. I don't think it's ng-class not accepting objects, it's just that Angular probably cannot parse ES6 object notation in its expression (which, strictly speaking, isn't JavaScript, it just allows to use some subset of JS (ES5?) among other features).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.