How to get element by ID for a dynamically generated ID in AngularJS?

Question

I am generating a list as below

<div ng-repeat="list in fileUploadList">
    <div id="{{list}}Upload"></div>
</div>

Inside the controller I have to get the element by ID so I am using this line:

document.getElementById($scope.fileUploadList[0] + 'Upload')

I logged the result to the console but it is returning null. What should I do?

Function in controller

$scope.loadHandleImage = function () {

     console.log(document.getElementsById($scope.fileUploadList[0] + 'Upload'));
            for (var i = 0; i < $scope.fileUploadList.length; i++)
            {  
                document.getElementById($scope.fileUploadList[i] + 'Upload').addEventListener('change', handleImage, false);   
            }

where handleImage is a function to be called

try maybe `angular.element('#' + $scope.fileUploadList[0] + 'Upload');`, what is `list`? is it just a string? with spaces? — Daniel Krom, Jul 07 '16 at 06:31
The controller should have no knowledge of your DOM. If you are calling document from within your controller you are not understanding the Angular separation of concerns design patterns. — Adrian Brand, Jul 07 '16 at 06:45

jitender · Answer 1 · 2016-07-07T07:39:52.393

1

I have got the problem document was not ready when you were trying to access the element use angular.element(document).ready method

angular.element(document).ready(function() {
console.log(document.getElementById($scope.fileUploadList[0] + "Upload"))
});

here is working example http://jsfiddle.net/hqqewnyc/

edited Jul 07 '16 at 07:39

answered Jul 07 '16 at 06:40

jitender

10,238
1
18
44

I checked using debugger. Its assiging the IDs – saikat mukherjee Jul 07 '16 at 06:47

score 0 · Answer 2 · answered Jul 07 '16 at 06:34

0

Use

angular.element('#' + $scope.fileUploadList[0] + 'Upload').on('change', handleImage)

instead of document.getElementById and addEventListener

answered Jul 07 '16 at 06:34

MeTe-30

2,512
2
21
30

score 0 · Answer 3 · answered Jul 07 '16 at 06:39

0

A simple way would be (if you dont care about your list object not being in the random id)

<div ng-repeat="list in fileUploadList" >
  <div id="{{$index}}Upload" ></div>
</div>

Then in the controller get the id by

document.getElementById('0Upload')
document.getElementById('1Upload')

..etc

answered Jul 07 '16 at 06:39

Srijith

1,434
9
14

How would I know the exact number of elements the array is returning. – saikat mukherjee Jul 07 '16 at 06:53
That would be the fileUploadList.length – Srijith Jul 07 '16 at 06:54

score 0 · Answer 4 · answered Jul 07 '16 at 06:40

Not angular expert but based on my DOM experience there are ways to get ID attribute. The way i do in normal javascript is here

str = "";
for(tmp=0;tmp<10;tmp++)
{
    str = str + "<div id='myid" + tmp + "' onclick='idofobject(\"myid" + id + "\")'>Click Me</div>";
}

i created html with DIV and dynamically assign it a id like myid1 myid2 etc. there is a function call for each div idofobject that takes the id

just a hint that there can be ways to get dynamic id of objects

score 0 · Answer 5 · answered Jul 07 '16 at 06:44

0

As each div gets dynamic ID, so the dynamic elements should be fetched using parent child relation. EX: If you add 2 button in a div dynamically fetch the first and second child of that div to get each button.

answered Jul 07 '16 at 06:44

Sumit Chawla

21
5

You can see in my given code I am calling them dynamically.. :) – saikat mukherjee Jul 07 '16 at 06:51
Please see the below thread you need to get the child elements using the outer div , you should give the outside div a id and they get child for that id: http://stackoverflow.com/questions/19500592/javascript-get-child-nodes-of-a-div – Sumit Chawla Jul 07 '16 at 09:33

score 0 · Accepted Answer · answered Jul 07 '16 at 06:45

0

instead of ids use a classname on the elements then get elements by class name - this will give you some kind of array you can then loop through and get whatever attribute you want off each element.

answered Jul 07 '16 at 06:45

matpol

3,042
1
15
18

How to get element by ID for a dynamically generated ID in AngularJS?

6 Answers6