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 ?
7 Answers
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
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
which would get interpolated to
<div id="object-1"></div>
-
2
-
1@JanAagaard Let us assume
myScopeObject
is a property of ascope
object exposed using a controller. Please see also docs.angularjs.org/guide/controller. Is that clear enough for you or shall I elaborate further? Oct 6, 2014 at 13:03 -
i did ng-attr-id="{{ 'Panel' + file.Id }}" but it does not generate id="Panel12312" for me :( May 23, 2015 at 5:47
-
17Aren't the following two identical in behavior:
<div id="{{ 'object' + index }}">
and<div ng-attr-id="{{ 'object' + index }}">
? The docs seem to say prependingng-attr-
is to help out for cases where the element is something non-standard, like not a<div>
. Am I reading the docs right? Jul 9, 2015 at 1:41 -
4@broc.seib using nd-attr is not only about standard. This is good practice because HTML interpreter can assign id to the element before angular gets loaded. And ng-attr ensures to assign id to the element only when angular gets loaded. same is the case for ng-src in <img> tag.– AlexApr 25, 2017 at 13:00
This thing worked for me pretty well:
<div id="{{ 'object-' + $index }}"></div>
-
Time flies and perhaps, the most intuitive syntax now just works as expected. I remember having some issues while iterating over a list. Jan 13, 2015 at 11:24
-
2This will work correct in 90% of cases but you may sometimes get errors which are hard to debug. You should use ng-attr-id instead.– BakiJun 3, 2016 at 13:32
-
ng-attr-id
is advantageous in 0% of situations. No examples can be provided, because there are none.– omikesDec 28, 2017 at 19:48 -
8The
ng-attr-id
method is to ensure that the raw ng expression is never rendered in a valid HTML attribute (e.g.id
,label
, etc). This is to stop any downstream usage reading ng 'junk' (e.g. before render is complete, or after a js crash)– OverflewJan 10, 2018 at 0:38
In case you came to this question but related to newer Angular version >= 2.0.
<div [id]="element.id"></div>
-
3
-
15I agree; it’s only going to be useful to those members that find it useful.– SoEzPzJan 30, 2018 at 17:27
-
26Some members still click on Angularjs links even though they are searching for Angular links. It's a bit confusing and errors will continue to happen.– SoEzPzJan 30, 2018 at 17:46
-
Be careful this is for Angular versions 2 or greater, Agree on this is out of context regarding the question, but the comment is very clear when saying which version of angular is applicable this approach Jan 28 at 15:22
A more elegant way I found to achieve this behaviour is simply:
<div id="{{ 'object-' + myScopeObject.index }}"></div>
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:
<div ng-repeat="object in myScopeObject">
<input id="{{object.name + 'Checkbox'}}" type="checkbox">
<label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>
Being able to generate unique ids on the fly can be pretty useful when dynamically adding content like this.
-
I think this approach has issues. I am initializing the angular binding after the page is loaded. Now at times the div fails to load properly which I guess is because of clash of id of different div.– sumeetJun 5, 2015 at 9:01
-
Interesting. If you could reproduce your behavior in a plunker example I would be happy to check it out. Does using 'ng-attr-id=' work and just using 'id=' not? Jun 7, 2015 at 23:52
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.
Just <input id="field_name_{{$index}}" />
-
-
I think it is probably because that is supposed to be in a ng-repeat?– gian1200Mar 22, 2019 at 14:06
-
Exact . @Pipo you should, may be, check here docs.angularjs.org/api/ng/directive/ngRepeat :) Apr 19, 2019 at 9:54
If you use this syntax:
<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>
Angular will render something like:
<div ng-id="object-1"></div>
However this syntax:
<div id="{{ 'object-' + $index }}"></div>
will generate something like:
<div id="object-1"></div>
-
7
-
6Why should
ng-attr-id
createng-id
..? that's wrong. I wonder who upvotes this– T JApr 28, 2016 at 4:32