CODEWITHSUNDEEP
javascriptjqueryangularjs
Manojkanth
Manojkanth

Reputation: 1169

angularJS: Change Image when Page Refresh. otherwise (if not refreshed) want to change automatically in 5 sec

Here am created one page with Image changing while the page refresh. from this SO question Change Image when Page Refresh in angularJS. Now i need to change the image automatically after the 5 seconds, which means the page refreshed or not the image want to change. How can i solve this issue by implementing this following code. please help me...

if(!localStorage.getItem("uID")){ var s = {"id":1};

    localStorage.setItem("uID", JSON.stringify(s))
  }
    $scope.data = [{
    "id": 1,
    "path": "Content/Banner/banner.jpg"
  },
  {
    "id": 2,
    "path": "Content/Banner/banner1.jpg"
  },
  {
    "id": 3,
    "path": "Content/Banner/banner2.jpg"
  },
  {
    "id": 4,
    "path": "Content/Banner/banner3.jpg"
  }]


var item = localStorage.getItem("uID")
 item = JSON.parse(item); 

 var obj = $scope.data.find(function(o){
   return o.id === item.id
 }) 
 // add this lines 
 $scope.image =(obj)? obj.path : "invalid id";
 if(item.id == 4){
    localStorage.removeItem("uIDs");
    item.id = 0;
 }
 item.id = item.id +1  ;

This is My Html

 <body>
   <div ng-app="app" ng-controller="ctrl">
     {{image}}
   <button ng-click="clear()">clear</button>
</div>
  </body>

Here is working plunker https://plnkr.co/edit/5ONenuXOwi54b2V2MXMW?p=preview

Upvotes: 2

Views: 571

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41427

you can use timeout function to show the image after 5 seconds.

init();
function init(){
  for (var i=0;i<=$scope.data.length-1;i++) {

      setTime(i)
  }
}
function setTime(i){
  $timeout(function(){
    $scope.image = $scope.data[i].path;
    if (i == $scope.data.length-1) {
       init()
    }
  }, (5000 * i));
}


angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
 
    $scope.data = [{
    "id": 1,
    "path": "Content/Banner/banner.jpg"
  },
  {
    "id": 2,
    "path": "Content/Banner/banner1.jpg"
  },
  {
    "id": 3,
    "path": "Content/Banner/banner2.jpg"
  },
  {
    "id": 4,
    "path": "Content/Banner/banner3.jpg"
  }]
    
    
  
 init();
 
  function init(){
    for (var i=0;i<=$scope.data.length-1;i++) {
      
        setTime(i)
    }
  }
  function setTime(i){
    $timeout(function(){
      $scope.image = $scope.data[i].path; 
      if (i == $scope.data.length-1) { 
          init();
      }
    }, (5000 * i));
  }
 
 $scope.clear = function(){
   debugger
   localStorage.removeItem("uIDs");
 }
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

     <div ng-app="app" ng-controller="ctrl">
       {{image}}
      <button ng-click="clear()">clear</button>
    </div>

Upvotes: 2

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

If I understand your question correctly then you are looking for this,,

Try this

<!DOCTYPE html>
<html>

<head>
	<script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
	<script type="text/javascript">
		angular.module("app",[])
		.controller("ctrl",function($scope, $timeout){
			$scope.data = [{
				"id": 1,
				"path": "Content/Banner/banner.jpg"
			},
			{
				"id": 2,
				"path": "Content/Banner/banner1.jpg"
			},
			{
				"id": 3,
				"path": "Content/Banner/banner2.jpg"
			},
			{
				"id": 4,
				"path": "Content/Banner/banner3.jpg"
			}]


			var k = Math.floor(Math.random() * 4) + 1;

			$scope.image = $scope.data[k-1].path;
			var obj = $scope.data[k];
			setImage();

			function setImage(argument) {
				
				$timeout(function () {
					if (obj.path) {
						if (obj.id >$scope.data.length) {
							$scope.image = getImage(obj.id);
							obj.id = 1;
						}else{
							$scope.image = getImage(obj.id);
							obj.id ++;
						}
					}else{
						$scope.image = "invalid id";
					}

					 setImage();
					}, 5000)
			};

			function getImage(id) {
				for (var i = $scope.data.length - 1; i >= 0; i--) {
					if ($scope.data[i].id == id) {
						return $scope.data[i].path;
					}
				}
			}


		})
	</script>
</head>

<body>
	<div ng-app="app" ng-controller="ctrl">
		{{image}}
		<button ng-click="clear()">clear</button>
	</div>
</body>

</html>

Here is the working fiddle

Upvotes: 2

Related Questions