AngularJS DOM 更新将元素添加到 $scope 但不用于删除答案

【问题标题】：AngularJS DOM updates on adding element to $scope but not for deletingAngularJS DOM 更新将元素添加到 $scope 但不用于删除
【发布时间】：2019-07-28 11:22:56
【问题描述】：

我有一个 Angular 1.x 应用程序，当向控制器中的数组添加元素时，我能够通过 ng-repeat 成功更新 DOM。但是，当我尝试删除元素时，DOM 不会更新。

这是视图的相关部分：

<ul class="pagination">

    <span ng-click="page(left)">left arrow</span>

    <li ng-repeat="i in range track by $index">

        <a href="" id="current-page-{{ $index * 5 == beginning }}" ng-click="pageStep( $index )">{{ $index + 1 }}</a>

    </li>

    <span ng-click="page(right)">right arrow</span>

</ul>

在我的控制器中，我有这个变量：

  $scope.range = [1,2,3,4,5,6,7,8,9,10];

这是我实际的 page() 函数：

  $scope.page = function ( direction ) {
      var lastnumber = $scope.range[$scope.range.length - 1];
      $scope.range.push(lastnumber + 1);
      $scope.range.shift();
  }

如果我删除函数中的最后一行，shift()，那么 DOM 将相应地更新。但是，当我将 shift() 添加回 DOM 时，既不会添加新元素，也不会删除旧元素。

我尝试在此函数中添加 $scope.$apply，但没有产生任何结果。
我也尝试过使用 splice(0,1) 而不是 shift 到 no results。
最后，我尝试删除 ng-repeat 中的“track by”。同样，这并没有解决任何问题。

但是，此函数确实正确更新了 $scope.range 对象，当我打印到控制台时，我看到该对象添加了新数字并删除了第一个数字。它似乎没有在浏览器中更新。

有什么想法吗？

【问题讨论】：

标签： javascript angularjs dom angularjs-ng-repeat angularjs-digest

【解决方案1】：

确保您将 ngclick 页面函数参数作为字符串传递给 'left' 或 'right'，否则它们将作为变量传递并在控制器中未定义。

现在代码的主要问题是您在 <a>{{$index + 1}}</a> 标记中引用了 $index，但您应该使用元素本身 <a>{{i}}</a>（不添加 1）。因此，您的代码正在运行，您只是没有将正确的变量绑定到视图。

在使用 $index 时使用它也可能不会为您的 id 和 ng-click 提供您想要的 <a></a> 属性的预期行为。

angular.module('app', [])
  .controller('myController', function($scope) {

    $scope.range = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    $scope.page = function(direction) {
      if (direction === 'right') {
        var lastnumber = $scope.range[$scope.range.length - 1];
        $scope.range.push(lastnumber + 1);
        $scope.range.shift();
      } else if (direction === 'left') {
        /// move left code
      }
    }
  })

<div ng-app="app" ng-controller="myController">
  <ul class="pagination">
    <span ng-click="page('right')">&#62;</span>
    <li ng-repeat="i in range track by i">
      <a href="" id="current-page-{{ $index * 5 == beginning }}" ng-click="pageStep( $index )">{{ i + 1 }}</a>
    </li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

【讨论】：