Как сохранить индекс элемента в ng-repat?

Question

У меня есть страница, на которой я хочу показать несколько баннеров, которые я создал.

Каждый баннер имеет несколько слайдов, и есть кнопка «Далее» и «Предыдущая», которая переключает эти слайды.Я делаю каждый из баннеров кнопкой с именем create banner.Работает с ng-repeat.

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

Я знаюпроблема в том, что $index изменяется при нажатии и влияет на все баннеры, но я не совсем понимаю, как с этим справиться.

Я буду очень признателен за вашу помощь.Вот код:

function nextSlide(index, slide, $scope) {
  for (var counter = 0; counter < $scope.ReceivedJsonFile.length; counter++) {
    for (var t = 0; t <= index; t++) {
      if (t == index) {
        if ($scope.ReceivedJsonFile[t].Type == "Banner") {
          for (var m = 0; m <= slide; m++) {
            if (m == slide) {
              $scope.selectedSlide += 1
              if ($scope.selectedSlide > $scope.ReceivedJsonFile[t].Children.length - 1) {
                $scope.selectedSlide = 0;
              }
            }
          }
        }
      }

<div cng-repeat="item in ReceivedJsonFile">
    <img ng-click="nextSlide($index,selectedSlide)" src="BContent/Images/Icons/arrow-88-16.png" style="position:relative;right:0;top:50%;-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);" /> 
</div> 

Answer 1

Немного сложно дать более точный совет без HTML-кода, но проблема ясна: у вас есть единственная переменная области selectedSlide, которая используется всеми баннерами.

минимум 2 варианта:

• использовать массив «selectedSlide», проиндексированный по номеру баннера

  $scope.selectedSlide = [];
  
  function nextSlide(index, slide, $scope) {
      for (var counter = 0; counter < $scope.ReceivedJsonFile.length; counter++) {
      for (var t = 0; t <= index; t++) {
      if (t == index) {
          if ($scope.ReceivedJsonFile[t].Type == "Banner") {
              for (var m = 0; m <= slide; m++) {
                  if (m == slide) {
                      $scope.selectedSlide[index] += 1
                                                     if ($scope.selectedSlide[index] > $scope.ReceivedJsonFile[t].Children.length - 1) {
                          $scope.selectedSlide[index] = 0;
                      }
  
                  }
              }
          }
      }
  

  ofc, при таком подходе вы должны изменить свой HTML, чтобы использовать selectedSlide[index] в ng-repeat, где это применимо

• альтернативно, вы можете создать директиву для баннера, что, возможно, является более подходящим подходом angularjs.См. https://docs.angularjs.org/guide/directive для справки.