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内部可用的变量，如果为true，ng-class将在元素上设置类current。

在使用angular时，您不会从其他任何地方为getElementById的元素分配唯一的ID。

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

1 个答案: