CODEWITHSUNDEEP
javascripthtmlangularjsconcatenation
trysis
trysis

Reputation: 8416

AngularJS: Concatenating Angular variables in HTML attributes

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.

Upvotes: 2

Views: 13618

Answers (2)

Kevin Curry
Kevin Curry

Reputation: 117

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}}"

Upvotes: 0

Satyam Koyani
Satyam Koyani

Reputation: 4274

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

Upvotes: 1

Related Questions