Как получить элемент по идентификатору, который динамически создается с помощью ng-repeat в angularjs

Question

Я только выкладываю необходимый код, и решение этой проблемы полностью очистит мои сомнения.Я новичок в angularjs, так что прошу прощения, если я спрашиваю что-то глупое.

Я использую ng-repeat для генерации списка, который использует массив, определенный в области видимости контроллера.Когда я нажимаю кнопку «Добавить еще», создается новый элемент.Я хочу получить доступ к этому элементу, чтобы добавить класс к нему.Но когда я использую функцию «getElementById» в той же функции «addNewForm», я получаю «ноль».Однако, когда я вызываю функцию «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 для элемента.

Вы не назначаете уникальные идентификаторы для элементов getElementById откуда-то еще при работе в угловых.