angularJS에서 페이지 새로 고침시 이미지 변경

Question

이것은 내 학교에서 직면하고있는 까다로운 작업입니다. angularJs에 완전히 새로운 것입니다. 데이터베이스에서 검색된 모든 이미지 중 하나의 이미지를 가져와야합니다. 그리고 나서 페이지를 새로 고침하면 다음 이미지가 나타납니다. 첫 번째 예 "banner.jpg 이미지"내가 페이지를 새로 고침 할 때 나타나는 "banner1.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); 
}); 

그리고 처음에의를 저장하는 로컬 스토리지를 사용할 수 있습니다

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

Answer 1

의 내 html로. 페이지를 새로 고치면 값이 증가하고 같은 로컬 저장소에 저장됩니다.

실행 아이디 변화를 볼 수있는이 Demo 여러 시간입니다.

제어기

이미지를 확인할 수 있으며, 추가 업데이트

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

. 데모를 다시 확인하십시오