Question

我有一个页面，我想要显示我创建的多个横幅。

每个横幅都有多个幻灯片，还有一个下一个和一个prev按钮可以切换这些幻灯片。我通过名为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，它在所有横幅之间共享。

您至少有两个选项：

使用由横幅编号

索引的“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以在ng-repeat中使用selectedSlide [index]（如果适用）

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

如何在ng-repat中保存元素索引？

1 个答案: