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
}

我需要使用角度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>

Answer 2

Please see the following example

//employee.json
{
    "resultTruncated": false,
    "containsSecureData": false,
    "entries": [
        {
            "type": "employee",
            "firstName": "Any",
            "lastName": "One",
            "address": [
                {
                    "streetOne": "123 Long Street",
                    "streetTwo": "Big Building",
                    "streetThree": "Room 456",
                    "city": "City",
                    "state": "ST",
                    "zip": "12345"
                }
            ],
            "phone": [
                {
                    "area": "111",
                    "number": "222-3333",
                    "extn": "444"
                }
            ],
            "email": "any@one.edu"
        }
    ]
}



<div ng-app>
    <div ng-controller="EmpListCtrl">
        <h1>Employees</h1>
        <ul>
            <li ng-repeat="employee in employees">
                {{employee.lastName}}, {{employee.firstName}}<br/>
                <a href="mailto:{{employee.email}}">{{employee.email}}</a>
                <ul>
                    <li ng-repeat="num in employee.phone">
                        {{num.area}}-{{num.number}}-{{num.extn}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

具有数组的Son数据的Angular ng-repeat

2 个答案: