javascript - 如何在Angular JS模板中获取相关对象？

Question

应该指出的是，我对 Angular 还很陌生。

我从 Django Rest Framework 获取了以下 JSON:

api/电影/1

    {
        "id": 1,
        "name": "Mr & Mrs Smith",
        "actors": [
            1,
            2,
        ]
    }

API/ Actor /1

    {
        "id": 1,
        "name": "Angelina Jolie",
    }

API/ Actor /2

    {
        "id": 2,
        "name": "Brad Pitt",
    }

我按照 Angular 教程使用 $resource 制作了一个电影详细信息页面。 这是 movie-detail.component.js

angular.
  module('movieDetail').
  component('movieDetail', {
    templateUrl: 'static/partials/movie-detail/movie-detail.template.html',
    controller: [ '$routeParams', 'Movie', 
      function MovieDetailController($routeParams, Movie) {
        var self = this;
          self.movie= Movie.get({movieId: $routeParams.movieId})
      }
    ]
  });

在电影 HTML 模板中，我可以通过“$ctrl.movi​​e.actors”访问“ Actor ”id。但我不知道是否有办法使用这个 id 向服务器询问“ Actor ”对象。就像是 : Actor.get({id}) 将它们合并到电影详细信息模板中。

TL;DR 我现在能做什么:

Actors:
    <ul>
       <ling-repeat="actor in $ctrl.movie.actors"> {{actor}} </li>
    </ul>

结果:

Actors

• 1
• 2

我想要一些类似的东西:

Actors:
    <ul>
       <ling-repeat="actor in $ctrl.movie.actors"> {{actor.name}} </li>
    </ul>

结果:

Actors

• Angelina Jolie
• Brad Pitt

如何实现这一目标？

感谢您的回复!

Answer 1

首先，您使用的是 Angularjs 2，而 Angularjs 2 与 Angularjs 1.* 截然不同。

在这种情况下，它更多的是 javascript 对象操作而不是 Angularjs 技巧

您可以尝试以下方法来实现这一目标

选项1:

如果您能够在 Django 中编辑其余调用，请更改您的代码以在一个 js 中返回电影和 Actor 详细信息，如下所示

{
    "id": 1,
    "name": "Mr & Mrs Smith",
    "actors": [
        1: {"id": 1,"name": "Angelina Jolie"},
        2: {"id": 1,"name": "Angelina Jolie"},
    ]
 }

并尝试在电影下为您的 Actor 对象重复 ng-repeat 。或者您可以根据需要将这两个调用分开。

选项2:

加载时需要进行延迟加载。加载电影对象后，您需要调用 Actor 休息 url 来获取所需的所有 Actor 对象，如果无法进行单个休息调用，则将它们附加到现有对象中。然后在模板中您可以显示 Actor 详细信息，如上所示.