AngularJS DOM обновляет добавление элемента в $ scope, но не удаление - PullRequest
Новая
       36

AngularJS DOM обновляет добавление элемента в $ scope, но не удаление

0 голосов
/ 06 марта 2019

У меня есть приложение Angular 1.x, и я могу успешно обновить DOM с помощью ng-repeat при добавлении элемента в массив в контроллере.Однако 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 безрезультатно.
  • Наконец, я попытался удалить «track by» в ng-repeat.Опять же, это ничего не исправило.

Однако эта функция корректно обновляет объект $ scope.range, когда я печатаю в консоль, я вижу, что объект получает новый добавленный номер и первый удаленный номер.Похоже, он не обновляется в браузере.

Есть идеи?

1 Ответ

0 голосов
/ 06 марта 2019

Убедитесь, что вы передаете свой параметр функции страницы ngclick либо «left», либо «right» в виде строки, в противном случае они будут переданы как переменные и не будут определены в контроллере.

Теперь основная проблема с кодом заключалась в том, что вы ссылались на $ index в своих тегах <a>{{$index + 1}}</a>, но вы должны использовать сам элемент <a>{{i}}</a> (без добавления 1). Итак, ваш код работал, вы просто не привязывали правильную переменную к представлению.

Использование $ index в том виде, в котором вы его используете, может также не дать ожидаемого поведения, которое вы хотите для своего идентификатора, и щелкнуть 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>
...