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.$apply 到这个函数，但没有产生任何结果。
我也试过使用 splice(0,1) 而不是 shift 没有结果。
最后，我尝试删除 ng-repeat 中的 'track by'。同样，这没有解决任何问题。

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

有什么想法吗？

Answer 1

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

现在代码的主要问题是您在 <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>

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

AngularJS DOM updates on adding element to $scope but not for deleting

javascript

dom

angularjs

angularjs-ng-repeat

angularjs-digest