如何使用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 CODE ------------------------- ----------

<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

我使用您的代码制作了一个片段并且运行得很好，但是加载图片需要一些时间。

另外，使用ng-src代替src。