Question

我正在生成如下列表

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

在控制器内部，我必须通过ID获取元素，所以我使用这一行：

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

我将结果记录到控制台，但它返回null。我该怎么办？

控制器中的功能

$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);   
            }

其中handleImage是要调用的函数

Answer 1

当您尝试访问元素时，我遇到问题文档未准备好使用angular.element（document）.ready method

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

这是工作示例http://jsfiddle.net/hqqewnyc/

Answer 2

使用

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

而不是document.getElementById和addEventListener

Answer 3

一种简单的方法是（如果你不关心你的列表对象不是随机id）

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

然后在控制器中获取id

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

...等

Answer 4

不是角度专家，但基于我的DOM经验，有获取ID属性的方法。我在普通javascript中的方式就是这里

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

我使用DIV创建了html并动态地为它分配了一个像myid1 myid2等的id。每个div idofobject都有一个函数调用，它带有id

只是暗示可以有办法获得对象的动态ID

Answer 5

当每个div获得动态ID时，所以应该使用父子关系获取动态元素。 EX ：如果在div中添加2个按钮，则动态获取该div的第一个和第二个子项以获取每个按钮。

Answer 6

而不是id在元素上使用类名，然后按类名获取元素 - 这将为您提供某种类型的数组，然后您可以遍历并从每个元素中获取您想要的任何属性。

如何在AngularJS中通过ID获取动态生成的ID？

6 个答案: