如何通过 id 获取元素，该元素由 angularjs 中的 ng-repeat 动态创建

Question

我只发布必要的代码，解决这么多问题将消除我的其余疑虑。我是 angularjs 的新手，所以如果我问一些愚蠢的事情，请原谅。

我正在使用 ng-repeat 来生成一个列表，该列表使用控制器作用域中定义的数组。当我单击"添加另一个"按钮时，将创建一个新元素。我想访问此元素以向其添加类。但是当我在同一个函数"addNewForm"中使用"getElementById"函数时，我得到"null"。 但是，当我通过点击"查找无标题"按钮调用函数"fn"时，我得到了正确的元素。有人可以解释和解决这个问题吗？任何帮助，不胜感激。提前感谢！

我正在发布下面的代码：

.HTML：

<div ng-controller="myctrl3">
<ul id ="menu_Ul">
<li ng-repeat="x in list">
<button id="{{ 'navAppsButtonID-' + $index }}">{{x}}</button>
<br>
</li>
<li>
<button ng-click="addNewForm()">Add another</button>
</li>
</ul>
<button ng-click="fn()">Find Untitled</button>
</div>

.JS：

.controller("myctrl3", function($scope) {
var list = ['abcd', 'efgh', 'ijkl', 'mnop'];
$scope.list = list;
$scope.abc = function () {
var listPush = function () {
$scope.list.push("Untitled Menu");
for(var i = 0;i<$scope.list.length-1;i++) {
var element = document.getElementById('navAppsButtonID-'+i);
element.classList.remove('current');
}
};
var listLen = $scope.list.length;
if($scope.list[listLen-1] === undefined) {
listPush();
}
else if ($scope.list[listLen-1] == "Untitled Menu") {
alert("Cannot open more than one Untitled Menu at the same time.");
}
else {
listPush();
}
};
$scope.addNewForm = function() {
$scope.abc();
console.log("Element is: ", document.getElementById('navAppsButtonID-'+($scope.list.length-1)));
};
$scope.fn = function () {
console.log("Element is: ", document.getElementById('navAppsButtonID-'+($scope.list.length-1)));
};
})

Answer 1

你考虑的jQuery太多了，角度太少了。如果目标是将类添加到ng-repeat的最后一个元素，则这就是您执行此操作的方法：

<li ng-repeat="x in list">
<button ng-class="{ current: $last }">{{ x }}</button>
</li>

$last是ng-repeat中可用的变量，如果为真，ng-class将在元素上设置类current。

在角度下工作时，不会将唯一 ID 分配给要从其他地方getElementById的元素。