在angularJS中刷新页面时更改图像 [英] Change Image when Page Refresh in angularJS

问题描述

这是我学校面临的艰巨任务.对angularJ来说是全新的.我需要从数据库中检索到的所有图像中提取一个图像.然后，当我刷新页面时，下一张图片就会出现.

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.

例如，当我刷新想要显示的页面"banner1.jpg"时，首先显示"banner.jpg".谁能帮我解决这个问题.请.

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.

这是我找回的杰森

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

我的角度控制器.

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);
 });

还有我的HTML

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

推荐答案

，您可以在第一时间使用localstorage来存储in.刷新页面后，增加该值并将其保存到相同的本地存储中，依此类推.

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.

多次运行此演示多次以查看ID更改.

run this Demo multiple time to see the id change.

控制器

 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");
 }

已更新

添加此项以检查图像.再次查看演示

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  ;

这篇关于在angularJS中刷新页面时更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！