Блог

У меня есть массив фильмов, определенный как переменная $ scope, $scope.moviesList . Я инициализировал все поля imageSrc для каждого объекта в массиве на » (пустая строка) и хочу обновить это поле для каждого объекта, используя следующую функцию (ключ API был отключен):

 //loadMoviePosters calls the movie API for each movie in the moviesList array
//and sets the imageSrc field to the Poster link returned
$scope.loadMoviePosters = function(){
    for(var i = 0; i < $scope.moviesList.length; i  ) {
        var movie = $scope.moviesList[i];
        $http({
            method: 'GET',
            url: "https://www.omdbapi.com/?t="   movie.title   "amp;apikey=XXXXXXX"
        }).then(function success(response) {
            if (response.data.Poster != "N/A") {
                movie.imageSrc = response.data.Poster;
            }
            else {
                movie.imageSrc = '';
            }
            $scope.moviesList[i] = movie;
            //alert($scope.moviesList[i].imageSrc);
        },
        function error(respnonse) {
            //do nothing
        })
    }
    alert($scope.moviesList[0].imageSrc);
}
  

Когда я раскомментирую предупреждение внутри цикла for, оно отображает ссылку на изображение для каждого объекта в массиве, но предупреждение вне цикла for всегда отображает пустую строку. Похоже, что массив $ scope.moviesList фактически не обновляется в этой функции.

В моем HTML у меня есть следующий код, в котором я хочу отображать постер для каждого фильма после того, как эта функция обновит массив $scope:

 <div ng-repeat = "movie in moviesList">
                <img ng-src = "{{movie.imageSrc}}" />
                <p>{{movie.title}}</p>
</div>
  

Кто-нибудь знает, как я могу заставить функцию loadMoviePosters фактически обновить массив $ scope.moviesList? И тогда как я могу заставить эти изображения отображаться в ng-repeat? Спасибо!