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
– Daniel Krom, Commented Jul 7, 2016 at 6: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
– Adrian Brand, Commented Jul 7, 2016 at 6:45

jitender · Accepted Answer · 2016-07-07 07:39:52Z

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 7, 2016 at 7:39

answered Jul 7, 2016 at 6:40

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saikat mukherjee Over a year ago

I checked using debugger. Its assiging the IDs

matpol · Accepted Answer · 2016-07-07 06:45:55Z

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 7, 2016 at 6:45

matpol

3,0741 gold badge16 silver badges20 bronze badges

Comments

MeTe-30 · Accepted Answer · 2016-07-07 06:34:16Z

0

Use

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

instead of document.getElementById and addEventListener

answered Jul 7, 2016 at 6:34

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

Comments

Srijith · Accepted Answer · 2016-07-07 06:39:16Z

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 7, 2016 at 6:39

Srijith

1,4449 silver badges14 bronze badges

2 Comments

saikat mukherjee Over a year ago

How would I know the exact number of elements the array is returning.

Srijith Over a year ago

That would be the fileUploadList.length

Shahzad Aslam · Accepted Answer · 2016-07-07 06:40:44Z

0

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

answered Jul 7, 2016 at 6:40

Shahzad Aslam

3002 silver badges14 bronze badges

Comments

Sumit Chawla · Accepted Answer · 2016-07-07 06:44:16Z

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 7, 2016 at 6:44

Sumit Chawla

215 bronze badges

2 Comments

saikat mukherjee Over a year ago

You can see in my given code I am calling them dynamically.. :)

Sumit Chawla Over a year ago

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: stackoverflow.com/questions/19500592/…

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related