如何将特定信息从外部 API 获取到我的 ng-repeat

How can I get specific information from an external api to my ng-repeat

本文关键字:获取 API 我的 ng-repeat 从外部 信息      更新时间:2023-09-26

main.html

<div class="row" ng-repeat="post in myBlogPosts.slice().reverse()">
    <br>
    <div class="col-md-9 text-center">
        <a href="#/blog-post/{{post._id}}">
            <div class="thumbnail mTextBg customShadow">
                <br>
                <img class="img-responsive" src="http://placekitten.com/700/400" alt="">
                <div class="caption">
                    <h3>{{post.imdbId}}</h3>
                    <p>{{post.blogContent}}</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">

        // I WANT THIS PART !!
        <div class="well sideBars customShadow">
            <img class="img-responsive" ng-src="{{film.Poster}}" title="{{film.Title}}">
            <h4 class="text-center">{{film.Title}}</h4>
            <p class="text-center" style="margin-bottom: 2px;"><b>Year:</b> {{film.Year}}</p>
            <p class="text-center"><span class="customMargin">Runtime: {{film.Runtime}}</span></p>
            <p class="text-center"><span class="customMargin">Director: {{film.Director}}</span></p>
            <p class="text-center"><span class="customMargin">Writer: {{film.Writer}}</span></p>
            <p class="text-center"><span class="customMargin">Actors: {{film.Actors}}</span></p>
        </div>
    </div>
</div>

这是我的主要内容的一部分.html.在 h3 和 p 标签中,我从我的数据库中获取 imdbId 和 blogContent 并将其放入 ng-repeat 中,以便遍历列表中的博客文章。我希望能够为myBlogPost中的每篇文章获取其他信息(在//下,我想要这部分(。

主控制器.js

var refresh = function() {
  $http.get('/myDatabase').success(function(response) {
    $scope.myBlogPosts = response;
  });
};
refresh();     

此部分在页面加载时按预期工作。

我也需要在主控制器中使用这些部件;

var onGetFilmData = function (data) {
  $scope.film = data;
};
var onError = function (reason) {
  $scope.error = reason;
};
imdb.getImdbInfo(-- need Id --).then(onGetFilmData, onError);

但是我需要以某种方式放置每个帖子 id,以便从 Imdb api 获取特定数据。

IMDB.js

(function(){
  
  var imdb = function($http){
    var getImdbInfo = function (id) {
      return $http.get('http://www.omdbapi.com/?i=' + id + '&plot=short&r=json')
                  .then(function(response){
                    return response.data;
                  });
    };
    
    return{
      getImdbInfo: getImdbInfo
    };
    
  };
  
  var module = angular.module('myApp');
  module.factory('imdb', imdb);
  
})();

如果我删除id部分并在getImdbInfo函数中放置一个特定的id字符串,则所有帖子都在main中.html只填写一个电影信息。我想在我的数据库中获取每部电影的这些数据(我在数据库中保存了每部电影的 imdb id(。

主控制器

var jsonObj = {};
var refresh = function() {
  $http.get('/myDatabase').success(function(response) {
    jsonObj = response;
    for(var i = 0; i < jsonObj.length ; i++){
        jsonObj[i].title = '';
    }
    for(var i = 0; i < jsonObj.length ; i++){
      (function(i) {
        imdb.getImdbInfo(jsonObj[i].imdbId).then(function (data) {  
          jsonObj[i].title = data.Title;
        });
      })(i);
    }
    $scope.myBlogPosts = jsonObj;
  });
};
refresh(); 

主.html

<div class="row" ng-repeat="post in myBlogPosts.slice().reverse()">
    <br>
    <div class="col-md-9 text-center">
        <a href="#/blog-post/{{post._id}}">
            <div class="thumbnail mTextBg customShadow">
                <br>
                <img class="img-responsive" src="http://placekitten.com/700/400" alt="">
                <div class="caption">
                    <h3>{{post.imdbId}}</h3>
                    <p>{{post.blogContent}}</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3">

        <!-- Side Widget Well -->
            <div class="well sideBars customShadow">
                <h4 class="text-center">{{post.title}}</h4>
            </div>    
    </div>
</div>

我解决了将来自 Imdb 的响应添加到来自数据库的 json 对象的问题。所以我可以轻松地在 ng-repeat 中使用它们。