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 ?
Add a comment
|
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>
8 Comments
Jan Aagaard
Where does
myScopeObject come from? Where would I define it?
Th. Ma.
@JanAagaard Let us assume
myScopeObject is a property of a scope object exposed using a controller. Please see also docs.angularjs.org/guide/controller. Is that clear enough for you or shall I elaborate further?
Manuel Maestrini
i did ng-attr-id="{{ 'Panel' + file.Id }}" but it does not generate id="Panel12312" for me :(
broc.seib
Aren't the following two identical in behavior:
<div id="{{ 'object' + index }}"> and <div ng-attr-id="{{ 'object' + index }}"> ? The docs seem to say prepending ng-attr- is to help out for cases where the element is something non-standard, like not a <div>. Am I reading the docs right?
Ankit
@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.
|
This thing worked for me pretty well:
<div id="{{ 'object-' + $index }}"></div>
3 Comments
Th. Ma.
Time flies and perhaps, the most intuitive syntax now just works as expected. I remember having some issues while iterating over a list.
Baki
This 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.
Overflew
The
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)In case you came to this question but related to newer Angular version >= 2.0.
<div [id]="element.id"></div>
5 Comments
btk
That is not useful, the question is in context of AngularJS
SoEzPz
I agree; it’s only going to be useful to those members that find it useful.
SoEzPz
Some 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.
Luis Raúl Espinoza Barboza
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
WesFanMan
Google doesn't seem to care much about the difference between AngularJS and Angular 2. This is helpful, thanks.
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.
2 Comments
sumeet
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.
Cumulo Nimbus
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?
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.
Comments
Just <input id="field_name_{{$index}}" />
3 Comments
Pipo
Why a $ in front of index?
gian1200
I think it is probably because that is supposed to be in a ng-repeat?
D. Mohamed
Exact . @Pipo you should, may be, check here docs.angularjs.org/api/ng/directive/ngRepeat :)
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>
