代码之家 › 专栏 › 技术社区 › Riples

尝试使用AngularJS创建重复的水平div滚动

angularjs-ng-repeat angularjs html

Riples · 技术社区 · 7 年前

ng-repeat . 我想展示3 <div> <部门; 一次连续地,然后在一个循环中重复。

例如:

我在一个数组中有8个对象,每个对象的数据将填充一个 < . 在我的页面初始化时,我想显示 <div1> , <div2> 和 <div3> . 30秒后,我想展示 <分区2> <第3部分> 和 <div4> <div6> , <div7> <div8> . 然后在接下来的30秒后,我想从头开始并展示 <分区7> < <分区1> 等等。

<部门; 改变位置,但这不是强制性的。

1 回复 | 直到 7 年前

Akber Iqbal 7 年前

var app = angular.module('myApp', []);
/* 4 falses allowed only */
app.controller('myCtrl', function($scope, $interval) {
  $scope.divVals = [{
      val: "item 0",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 1",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 2",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 3",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 4",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 5",
      effectiveIndex: 0,
      hide: true
    },
    {
      val: "item 6",
      effectiveIndex: 1,
      hide: false
    },
    {
      val: "item 7",
      effectiveIndex: 2,
      hide: false
    },
    {
      val: "item 8",
      effectiveIndex: 3,
      hide: false
    },
    {
      val: "item 9",
      effectiveIndex: 4,
      hide: false
    }
  ];
  $scope.checkVal = function() {
    console.log(name);
  }

  $scope.next4divs = function() {
    var counterFOUR = 0;
    for (var i = 0; i < $scope.divVals.length; i++) {

      if (i == 9 && $scope.divVals[i].hide == true && $scope.divVals[0].hide == false && counterFOUR < 4) {
        $scope.divVals[0].hide = true;
        $scope.divVals[4].hide = false;
        $scope.setEffectiveIndex(1);
        break;
      } else if ($scope.divVals[i].hide == true && $scope.divVals[i + 1].hide == false && counterFOUR < 4) {
        if (i > 5) {
          counterFOUR++;
          var indexNum = i + 1;
          var turnTrue = i - 5;

          $scope.divVals[indexNum].hide = true;
          $scope.divVals[turnTrue].hide = false;
          $scope.setEffectiveIndex(indexNum + 1);
          break;
        } else {
          counterFOUR++;
          var turnFalse = i + ($scope.divVals.length - 4);
          var indexNum = i + 1;
          if (turnFalse > 10) {
            turnFalse = turnFalse - 10;
          }

          $scope.divVals[indexNum].hide = true;
          $scope.divVals[turnFalse - 1].hide = false;
          $scope.setEffectiveIndex(indexNum + 1);
          break;
        }
      }

    }
  }

  $scope.setEffectiveIndex = function(passedIndex) {
    if (passedIndex < 10) {
      $scope.divVals[passedIndex].effectiveIndex = 1;
    } else if (passedIndex >= 10) {
      $scope.divVals[passedIndex - 10].effectiveIndex = 1;
    }

    if (passedIndex + 1 < 10) {
      $scope.divVals[passedIndex + 1].effectiveIndex = 2;
    } else if (passedIndex + 1 >= 10) {
      $scope.divVals[passedIndex + 1 - 10].effectiveIndex = 2;
    }

    if (passedIndex + 2 < 10) {
      $scope.divVals[passedIndex + 2].effectiveIndex = 3;
    } else if (passedIndex + 2 >= 10) {
      $scope.divVals[passedIndex + 2 - 10].effectiveIndex = 3;
    }

    if (passedIndex + 3 < 10) {
      $scope.divVals[passedIndex + 3].effectiveIndex = 4;
    } else if (passedIndex + 3 >= 10) {
      $scope.divVals[passedIndex + 3 - 10].effectiveIndex = 4;
    }
  }

  $scope.visibilityFunction = function() {
    $interval(() => {
      $scope.next4divs()
    }, 2000);
  }


});

.box {
  height: 100px;
  width: 100px;
  background: lightblue;
  float: left;
  text-align: center;
  padding-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
  <button type="button" ng-click="visibilityFunction('start')">Start</button>
  <hr/>
  <div class='containingDiv'>
    <div ng-repeat="item in divVals | filter: item.hide==true | orderBy: 'effectiveIndex'">
      <div class='box'>{{item.val}} <br/> {{item.effectiveIndex}}</div>
    </div>
  </div>



</div>