Блог

У меня есть массив, и я хочу иметь возможность переходить к следующему индексу массива всякий раз, когда я нажимаю кнопку.

Html-код, в котором я вызываю функцию:

 <div class="flex">
  <div class="date-switcher">
    <header>                    
      <h1>{{ ctrl.percent}}</h1>
    </header>
  </div>

  <div class="arrows-switch">              
    <div class="right-arrow" ng-click="nextValue()">
      <a href="#"><img src="assets/images/images/images/arrow-sprite_02.png">. 
      </a>
    </div>
  </div>
</div>
  

И код jvs, в котором я пытаюсь выполнить итерацию :

 var ctrl = this;

var percent = [
    { value: 70,},
    { value: 93,},
    { value: 100,},
    { value: 94,},
    { value: 66,}
];

for(var i=0; i < percent.length;i  ) {
    
    ctrl.percent = percent[i].value
    break
}

$scope.nextValue = function() {

    ctrl.percent = percent[i 1].value
}
  

Вывод из заголовка h1 {{ctrl.percent}} равен 70, который является ctrl.percent первым элементом массива, но когда я вызываю функцию nextValue , она переходит ко второму элементу массива и останавливается.

Как я могу заставить его продолжать переход к следующему элементу массива до последнего?

Ожидается: 1-й щелчок — 2-й элемент массива, 2-й щелчок, 3-й элемент массива и т. Д…

 indexValue = 0;
$scope.nextValue = function() {
    this.percent = percent[indexValue 1].value
  }
  

Объявите значение индекса как глобальную переменную. Я думаю, это должно сработать.