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

Question

这是我学校面临的一项艰巨任务。我对 AngularJs 完全陌生。我需要从数据库中检索到的所有图像中获取一张图像。然后当我刷新页面时，下一个图像要出现。

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

这是我检索到的 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"
  },

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

这是我的 Html

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

Answer 1

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

运行这个Demo多次查看id变化。

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

已更新

添加此内容以检查图像。再次检查演示

 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  ;