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.

Solution

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