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）而不是转移到没有结果。
最后，我尝试在ng-repeat中删除“ track by”。再次，这没有解决任何问题。

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

有什么想法吗？

Answer 1

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

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

在使用$ index时，可能也无法获得您想要的ID和ng单击<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时更新，但不删除

1 个答案: