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

我的角度控制器。

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在第一时间存储。刷新页面后，将值递增并将其保存到同一本地存储中，依此类推。

多次运行此Demo以查看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  ;

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

1 个答案: