如何使用angularjs中的间隔服务循环切换多个div图层?

时间:2016-09-17 17:07:01

标签: angularjs

好的,我想使用间隔服务循环每8秒切换多个div层。每个div层应该从div1开始每隔8秒显示一次,然后以div4结束,然后循环回div1.Here是我的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />

<title>Untitled 2</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-animate.js"></script>
    </head>

    <body ng-app="bgApp">
    This should change every 8 seconds!
    <div id="view" ng-controller="switchDiv" >
   <div ng-show="view" >
   <div ng-show="div1" > This is Div 1!</div>
   <div ng-show="div2" > This is Div 2!</div>
   <div ng-show="div3" > This is Div 3!</div>
   <div ng-show="div4" > This is Div 4!</div>
   </div>

   </div>
   <script>
   var app = angular.module('bgApp', ['ngAnimate']);
   app.controller('switchDiv', function($scope, $interval) {
   $scope.view =  new Div();
   $scope.view = $scope.div1;
   $scope.view = $scope.div2;
   $scope.view = $scope.div3;
   $scope.view = $scope.div4 ;

   $interval(function () {
   $scope.view = new Div();
   }, 8000);
   });</script>
   </body>
   </html>

提前谢谢, Batoe

1 个答案:

答案 0 :(得分:0)

看起来你可能对范围有点困惑。将范围视为您希望HTML看到的数据的巨大容器。 Ng-show采用布尔值,因此您从未将$ scope.div1初始化为任何内容,因此它认为为false,因此不显示。尝试在控制器中初始化$ scope.div1为true,你应该看到我的意思。这应该会帮助你朝着正确的方向前进。