Change Image when Page Refresh in angularJS

Question

This is on of tough task that am facing in my school. am totally new to angularJs. i need to fetch one image out of all retrieved images from the database. And then when i refresh the page the next image want to appear.

for an example first "banner.jpg" appear when i refresh the page "banner1.jpg" want to appear. can anyone help me to do solve this problem. please.

This is my retrieved Json

{
    "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"
  },

my angular controller.

appGM.controller('bannerCtrl', ['$scope', '$http', 'urls', function ($scope, $http, urls) {
var request = $http({
    method: 'GET',
    url: urls.api + 'Banner/Banners'

}).success(function (data, status) {

    console.log(data);
    console.log(JSON.stringify(data));
    console.log(JSON.parse(JSON.stringify(data)));

    $scope.BBanner = angular.fromJson(data);

})
 .error(function (error) {
     $scope.status = 'Unable to load dog images: ' + error.message;
     console.log($scope.status);
 });

And its my Html

<div class="row">
         <div class="col-sm-3 sidenav" ng-repeat="d in BBanner">
                        <img ng-src="{{d.path}}">
    </div>

use localstorage to store old id of image then compare and use next image — Jayant Patil
– Jayant Patil, Commented Mar 22, 2017 at 9:54
thank you for your comment brother. i'm new to angular. can you please say how to do that. — Manojkanth
– Manojkanth, Commented Mar 22, 2017 at 9:56

Sachila Ranawaka · Accepted Answer · 2017-03-22 11:46:38Z

1

you can use localstorage to store the in in the first time. After you refresh the page increment the value and save it to the same local storage and so on.

run this Demo multiple time to see the id change.

controller

 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);
 alert("Id = " + item.id)

 item.id = item.id +1  ;

 localStorage.setItem("uID", JSON.stringify(item))

 $scope.clear = function(){
   localStorage.removeItem("uID");
 }

updated

add this to check the image. check the demo again

 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  ;

edited Mar 22, 2017 at 11:46

answered Mar 22, 2017 at 10:21

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Manojkanth Over a year ago

+1 for your 2nd comment to my quetion. dont mistake me brother am new to angular. can please tell how can i use it into my code. i need to change the images.

Sachila Ranawaka Over a year ago

@Coderszone tech check the demo again

Sachila Ranawaka Over a year ago

@Coderszone tech no prob bro :D

Manojkanth Over a year ago

cant loop firstimage again without clearing the localstorage?

Manojkanth Over a year ago

without clicking the clear button //{localStorage.removeItem("uID");}// after the the banner3.jpg appeared again the banner.jpg {1st image} need to appear. is that possible??

|

Collectives™ on Stack Overflow

Change Image when Page Refresh in angularJS

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related