来自 RESTful Service Angular 的输出图像

Question

我是 Angular 的新手，所以为了掌握它，我一直在使用 Dummy RESTful 服务。现在我已经设法拉取图像 URL，然后将其推送到数组中。

我想在触发“ng-click”指令时将此数组输出为图像。

任何指导或帮助将不胜感激。

<p ng-click="outputImageData()">click me</p>
<ul>
    <li ng-repeat="photo in photos">
        {{ image }}
    </li>
</ul>

myApp.factory('getImages', function($http) {
    var imageService = {
      async: function(id) {
          var promise = $http.get('https://jsonplaceholder.typicode.com/photos/1').then(function(response) {
              return response.data;
          })
          return promise;
      }
    };
    return imageService;
});

myApp.controller("outputImages", function($scope, getImages) {
    var photos = [];
    $scope.outputImageData = function() {
        getImages.async().then(function(data) {
            var photoId = data.url;
            photos.push(photoId);
            console.log(photos);
        })
    }
});

谢谢

Answer 1

我一直在使用 angularjs，但通常作为开发人员，我才刚刚开始，所以请多多包涵。

我认为这样的事情会起作用：

<p ng-click="updateImageData()">click me</p>
<ul>
    <li ng-repeat="photo in photos">
        <img src="{{photo.url}}">
    </li>
</ul>

myApp.factory('getImages', function($http) {
    var imageService = {
      async: function() {
          var promise = $http.get('https://jsonplaceholder.typicode.com/photos/');
          return promise;
      }
    };
    return imageService;
});
myApp.controller("outputImages", function($scope, getImages) {
    $scope.photos = [];
    $scope.updateImageData = function() {
        getImages.async(photoId).then(function(data) {
            $scope.photos = data;
            console.log(photos);
        })
    }
});