AngularJS DOM更新了将元素添加到$ scope但不删除

Question

我有一个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将相应地更新。但是，当我在DOM中添加shift（）时，既不会添加新元素也不会删除旧元素。

• 我已经尝试添加$ scope。$适用于此函数，但没有产生任何结果。
• 我也尝试过使用splice（0,1）而不是转换为无结果。
• 最后，我尝试删除ng-repeat中的'track by'。这再次没有解决任何问题。

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

有任何想法吗？

Answer 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>