ng-click을 사용하여 json 객체에서 표시된 내용을 변경하는 방법은 무엇입니까?

Question

reddit에서 GIFS를 클릭하려고합니다. 범위 카운터가 업데이트되지만 표시된 이미지는 업데이트되지 않습니다. 우리가 뭘 잘못하고 있니? 제발 고마워.

angular.module('tasty', []); 
angular.module('tasty') 
.controller('MainController', function($scope, $http) { 
    $scope.title = "Tasty" 
    $scope.counter = 24; 
    console.log($scope.counter); 
    $scope.increment = function(counter){ 
     $scope.counter += 1; 
     $scope.updateGif(); 
     } 
    $scope.decrement = function(counter){ 
     if(counter<=0) 
      { 
       return; 
      } 
     $scope.counter -= 1; 
     } 

    $scope.updateGif = function(counter) { 
      console.log($scope.counter); 
     $http.get("https://www.reddit.com/r/gifrecipes.json") 
    .then(function(response) { 
     $scope.gifData = response.data.data.children[$scope.counter].data.preview.images[0].variants.gif.source.url; 
       console.log($scope.gifData); 
    }); 
    } 
    $http.get("https://www.reddit.com/r/gifrecipes.json") 
    .then(function(response) { 
     $scope.gifData = response.data.data.children[$scope.counter].data.preview.images[0].variants.gif.source.url; 
       console.log($scope.gifData); 
    }); 
}); 

-------------------- HTML 코드 --------------------- --------------

<div> 
<h1 ng-click="increment(counter)">Increment</h1> 
</div> 
<div> 
<img src="{{gifData}}"> 
</div> 
<div> 
<h1 ng-click="decrement(counter)">Decrement</h1> 
</div> 

Answer 1

난 당신의 코드를 사용하여 조각을 만들어 잘 작동하지만, 이미지를로드하는 데 약간의 시간이 걸렸습니다.

또한 src 대신 ng-src을 사용하십시오.