javascript - 对具有数组的 Son 数据进行 Angular ng-repeat

Question

{
  "adult": false,
  "backdrop_path": "/oja259HY4XlSTSnBwoErZ8A080x.jpg",
  "belongs_to_collection": {
    "id": 529,
    "name": "Wallace & Gromit Collection",
    "poster_path": "/993pCCMO9g9RQUtNDxQgE1B330H.jpg",
    "backdrop_path": "/huyrvVKEKa9czUY89fnvaAVAtkX.jpg"
  },
  "budget": 0,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": "http://www.wallaceandgromit.com/films/a-grand-day-out",
  "id": 530,
  "imdb_id": "tt0104361",
  "original_language": "en",
  "original_title": "A Grand Day Out",
  "overview": "Wallace and Gromit have run out of cheese and this provides an excellent excuse for the animated duo to take their holiday on the moon, where, as everyone knows, there is ample cheese. The moon is inhabited by a mechanical caretaker, who is not too happy about the two visitors from earth that nibble on the moon.",
  "popularity": 1.468545,
  "poster_path": "/jgQU84QuFQ4yofDmGYzOsXLEQj9.jpg",
  "production_companies": [
    {
      "name": "Aardman Animations",
      "id": 297
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "GB",
      "name": "United Kingdom"
    }
  ],
  "release_date": "1990-05-18",
  "revenue": 0,
  "runtime": 23,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Join the ultimate human-canine team as they blast off in a home-made rocket to see if the moon is really made of cheese.",
  "title": "A Grand Day Out",
  "video": false,
  "vote_average": 7.3,
  "vote_count": 96
}

我需要使用 angular js 在 html 有序列表中显示此数据，我不确定如何遍历 genres、production_countries、spoken_languages。请告诉我如何在 HTML 页面中显示它

Answer 1

如果我理解正确的话:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data = data;
});

var data = {
  "adult": false,
  "backdrop_path": "/oja259HY4XlSTSnBwoErZ8A080x.jpg",
  "belongs_to_collection": {
    "id": 529,
    "name": "Wallace & Gromit Collection",
    "poster_path": "/993pCCMO9g9RQUtNDxQgE1B330H.jpg",
    "backdrop_path": "/huyrvVKEKa9czUY89fnvaAVAtkX.jpg"
  },
  "budget": 0,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 16,
      "name": "Animation"
    },
    {
      "id": 35,
      "name": "Comedy"
    },
    {
      "id": 878,
      "name": "Science Fiction"
    },
    {
      "id": 10751,
      "name": "Family"
    }
  ],
  "homepage": "http://www.wallaceandgromit.com/films/a-grand-day-out",
  "id": 530,
  "imdb_id": "tt0104361",
  "original_language": "en",
  "original_title": "A Grand Day Out",
  "overview": "Wallace and Gromit have run out of cheese and this provides an excellent excuse for the animated duo to take their holiday on the moon, where, as everyone knows, there is ample cheese. The moon is inhabited by a mechanical caretaker, who is not too happy about the two visitors from earth that nibble on the moon.",
  "popularity": 1.468545,
  "poster_path": "/jgQU84QuFQ4yofDmGYzOsXLEQj9.jpg",
  "production_companies": [
    {
      "name": "Aardman Animations",
      "id": 297
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "GB",
      "name": "United Kingdom"
    }
  ],
  "release_date": "1990-05-18",
  "revenue": 0,
  "runtime": 23,
  "spoken_languages": [
    {
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "Join the ultimate human-canine team as they blast off in a home-made rocket to see if the moon is really made of cheese.",
  "title": "A Grand Day Out",
  "video": false,
  "vote_average": 7.3,
  "vote_count": 96
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h3>genres</h3>
  <ul id="genres">
    <li ng-repeat="g in data.genres">
      {{g.name}}
    </li>
  </ul>
  <h3>countries</h3>
  <ul id="countries">
    <li ng-repeat="g in data.production_countries">
      {{g.name}}
    </li>
  </ul>
  <h3>languages</h3>
  <ul id="languages">
    <li ng-repeat="g in data.spoken_languages">
      {{g.name}}
    </li>
  </ul>
</div>