How to set the id attribute of a HTML element dynamically with angularjs 1 x

Question

Provided an HTML element of type div  how to set the value of its id attribute  which is the concatenation of a scope variable and a string

User · Answer

You could just simply do the following

In your js

$scope.id = 0;

In your template

<div id="number-{{$scope.id}}"></div>

which will render

<div id="number-0"></div>

It is not necessary to concatenate inside double curly brackets.

User · Answer

Just  lt input id  field name    index      gt

User · Answer

This thing worked for me pretty well    lt div id      object-     index     gt  lt  div gt

User · Answer

If you use this syntax    lt div ng-attr-id      object-    myScopeObject index     gt  lt  div gt    Angular will render something like     lt div ng-id  object-1  gt  lt  div gt    However this syntax    lt div id      object-     index     gt  lt  div gt    will generate something like    lt div id  object-1  gt  lt  div gt

User · Answer

ngAttr directive can totally be of help here  as introduced in the official documentation   https   docs angularjs org guide interpolation -ngattr-for-binding-to-arbitrary-attributes  For instance  to set the id attribute value of a div element  so that it contains an index  a view fragment might contain   lt div ng-attr-id      object-    myScopeObject index     gt  lt  div gt    which would get interpolated to   lt div id  object-1  gt  lt  div gt

User · Answer

A more elegant way I found to achieve this behaviour is simply    lt div id      object-    myScopeObject index     gt  lt  div gt    For my implementation I wanted each input element in a ng-repeat to each have a unique id to associate the label with  So for an array of objects contained inside myScopeObjects one could do this    lt div ng-repeat  object in myScopeObject  gt       lt input id    object name    Checkbox     type  checkbox  gt       lt label for    object name    Checkbox     gt   object name   lt  label gt   lt  div gt    Being able to generate unique ids on the fly can be pretty useful when dynamically adding content like this

User · Answer

In case you came to this question but related to newer Angular version    2 0    lt div  id   element id  gt  lt  div gt

[javascript] How to set the id attribute of a HTML element dynamically with angularjs (1.x)?

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-scope

Examples related to string-concatenation