在angularJS中刷新页面时更改图像

Question

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

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

这是我找回的杰森

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

Answer 1

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

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

控制者

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

更新

添加它以检查图像。 再次检查演示

 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  ;