我怎样才能从外部API的具体信息到我的NG-重复 [英] How can I get specific information from an external api to my ng-repeat

问题描述

<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>

这是我的main.html中的一部分。在H3和p标签，我从数据库中获取imdbId和blogContent并把它放在NG重复，以遍历博客文章列表中。我希望能够获得其他的资料（在 //我得到这个角色）在myBlogPost每一个岗位。

This is part of my main.html . In h3 and p tags, I get imdbId and blogContent from my database and put it in ng-repeat in order to traverse blog posts in list. I want to be able get other information(under // I WANT THIS PART) for every post in myBlogPost.

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

refresh();     

这部分工作，当页面加载的预期。

This part work as expected when page loaded.

我还需要在主控制器这些部分;

I need also these parts in Main Controller ;

var onGetFilmData = function (data) {
  $scope.film = data;
};

var onError = function (reason) {
  $scope.error = reason;
};

imdb.getImdbInfo(-- need Id --).then(onGetFilmData, onError);

但我需要把各个帖子ID不知何故，以便从IMDB API获取特定数据。

But I need to put each post id somehow in order to get specific data from Imdb api.

(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);

})();

如果我删除的标识的一部分，纳入getImdbInfo功能的特定ID字符串，在main.html中所有填写后只用一个资料片。我想在我的数据库获取为每部影片的数据（我拿的每部电影的IMDB编号在我的数据库）。

If I delete id part and put a specific id string in getImdbInfo function, all post in main.html fill with just one film information. I want to fetch those data for each film in my database(I am holding imdb id of each film in my database).

推荐答案

MainController

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(); 

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">


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

我解决我的问题来自IMDB加入响应是从数据库来我的JSON对象。因此，我可以很容易地在NG-重复使用它们。

I solve my problem with adding response from Imdb to my json object which is coming from database. So I can easily use them in ng-repeat.

这篇关于我怎样才能从外部API的具体信息到我的NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！