AngularJS: Concatenating Angular variables in HTML attributes

Question

I'm new to AngularJS, but from what I've seen & done so far it is amazing. What I want to do is have an AngularJS binding inside an HTML attribute, but concatenate it with another string. The main place I would do this is classes & id's, as I like to have names like "thisform" & "thisdivid" etc. An example element from my page is:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_{{ id }}" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

I would like it to be something like:

<input type="checkbox" 
  name="tdl_task[]" 
  data-ng-checked="list.default" 
  id="tdl_task_" + {{ id }} + "" 
  data-ng-class="{tdl_item: true}" 
  data-ng-true-value="done" 
  data-ng-false-value="not_done" />

but without the plusses. I would like to do this without wrapping it in JavaScript or PHP or creating another whole binding in the controller just for that attribute.

If you're using angular, inputs should always have ng-model on them. I'd look at using that instead, as you often don't need id attributes too if you use ng-model correctly. — Michael Low
– Michael Low, Commented Aug 30, 2013 at 12:19
Edited it so it wouldn't be cut off like that. Stack wasn't connecting last night so when it connected again I just submitted whatever was there because I didn't want to type it all out again. — trysis
– trysis, Commented Aug 30, 2013 at 12:44
Mikel is right. If you are trying to create an ID then you might be trying to do something un-angularish. Why do you need an ID? Is it for a label for attribute? — checketts
– checketts, Commented Aug 31, 2013 at 7:46
Maybe a for attribute. I could also use it for classes, as I said. The point was not to ask why I should or should not do it, but to ask whether & how I can do it. — trysis
– trysis, Commented Aug 31, 2013 at 14:11

Satyam Koyani · Accepted Answer · 2013-08-30 12:13:16Z

1

For doing this you have to create one directive. id is provided by html itself you cannot modify its behavior. So create your own custom directive that will take your id and assign this as an id of your html element.

To learn more about directive please visit

Details study on directives

answered Aug 30, 2013 at 12:13

Satyam Koyani

4,2842 gold badges25 silver badges49 bronze badges

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

2 Comments

trysis Over a year ago

I'm not trying to modify its behavior. It would still be a string, it would just be a string with a variable as part of it. You can already do this if you wrap it in a script tag.

Satyam Koyani Over a year ago

@trysis Thanks ...For this info i will try it in some demo application.

Kevin Curry · Accepted Answer · 2014-06-24 19:45:33Z

0

Not sure if this is new in Angular since the question was asked but I had this exact same problem. It turns out that you can get Angular to evaluate + replace the handlebars by preceding it with backslash (), i.e., id="tdl_task_\{{id}}"

answered Jun 24, 2014 at 19:45

Kevin Curry

1171 silver badge5 bronze badges

2 Comments

trysis Over a year ago

It's not "new" in Angular (compared to how old Angular is to begin with) as this question was asked almost a year ago. Interesting answer, though.

Giszmo Over a year ago

ok, so while this is great for some cases, it isn't for mine as now I get an id that is td1_task_\5 but the \ is really annoying. Any hints?

Collectives™ on Stack Overflow

AngularJS: Concatenating Angular variables in HTML attributes

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related