如何在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 个选项：

• 使用按横幅编号编制索引的"选定幻灯片"数组

  $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 以在 ng-repeat 中使用 selectedSlide[index]，如果适用

• 或者，您可以为横幅创建一个指令，这可能是一种更合适的 AngularJS 方法。请参阅 https://docs.angularjs.org/guide/directive 以供参考。