将 AngularJS 与嵌套在数组中的数组中的 JSON 对象一起使用，如何将数据放入 html？

Question

我正尝试按如下方式将 JSON 数据放入 list.html，但我的尝试失败了。我已尝试遵循其他类似帖子中描述的模式，但没有任何运气，也没有找到 JSON 数据格式与我的完全相同的场景。如何显示 givenName、familyName、primaryTitle、phones[0].value 和 photo.small 等字段？

index.html:

<!doctype html>
<html lang="en" ng-app="directoryApp">
<head>
  <meta charset="UTF-8">
  <title>Directory</title>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="lib/angular/angular-animate.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-view></div>
</body>
</html>

list.html:

<ul ng-show="query">
    <li ng-animate="'animate'" ng-repeat="person in people.people | filter: query | orderBy: peopleOrder:direction">
        <img ng-src="images/{{person.photo.small}}" alt="Photo of {{person.name.givenName}}">
        <div class="info">
          <h2>{{person.name.givenName}}</h2>
          <h3>{{person.primaryTitle}}, {{person.phones[0].value}}</h3>
        </div>
    </li>
  </ul>

controllers.js:

var directoryControllers = angular.module('directoryControllers', ['ngAnimate']);

directoryControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/directoryData.json').success(function(data) {
    $scope.people = data;
    $scope.peopleOrder = 'familyName';
  });
}]);

app.js:

var directoryApp = angular.module('directoryApp', [
  'ngRoute',
  'directoryControllers'
]);

directoryApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/list', {
    templateUrl: 'partials/list.html',
    controller: 'ListController'
  }).
  otherwise({
    redirectTo: '/list'
  });
}]);

directoryData.json:

[
    {
        "uid": 15, 
        "name": "School of Programming", 
        "sortKey": 0, 
        "type": "Academic", 
        "address": {
            "address1": "255 Foo St",
            "address2": "Suite 310",
            "city": "FooBar",
            "state": "FB",
            "postalCode": "90210"
        },
        "phones": [
            {
                "type": "Work", 
                "value": "555-1616"
            },

            {
                "type": "Fax", 
                "value": "555-3620"
            }
        ],
        "people": [
            {
                "uid": "person1", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Roo",
                    "nickname": "",
                    "additionalName": "",
                    "familyName": "Baf"
                },
                "primaryTitle": "Part Time Worker",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-1616"
                    },

                    {
                        "type": "Mobile", 
                        "value": "555-1509"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/foo_portrait_small.jpg", 
                    "medium": "/__media__/photos/foo_portrait_medium.jpg", 
                    "large": "/__media__/photos/foo_portrait_large.jpg"
                }
            },

            {
                "uid": "person2", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Foo",
                    "nickname": "",
                    "additionalName": "P.",
                    "familyName": "Bar"
                },
                "primaryTitle": "Blah",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-3608"
                    },

                    {
                        "type": "Home", 
                        "value": "555-4716"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/portrait_small.jpg", 
                    "medium": "/__media__/photos/portrait_medium.jpg", 
                    "large": "/__media__/photos/portrait_large.jpg" 
                }
            }
        ]
    },
    {
        "uid": 16, 
        "name": "School of Coding", 
        "sortKey": 1, 
        "type": "Academic", 
        "address": {
            "address1": "256 Foo St",
            "address2": "Suite 311",
            "city": "FooBar",
            "state": "FB",
            "postalCode": "90210"
        },
        "phones": [
            {
                "type": "Work", 
                "value": "555-1616"
            },

            {
                "type": "Fax", 
                "value": "555-3620"
            }
        ],
        "people": [
            {
                "uid": "person3", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Boo",
                    "nickname": "",
                    "additionalName": "",
                    "familyName": "Far"
                },
                "primaryTitle": "Part Time Worker",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-1617"
                    },

                    {
                        "type": "Mobile", 
                        "value": "555-1508"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/fooz_portrait_small.jpg", 
                    "medium": "/__media__/photos/fooz_portrait_medium.jpg", 
                    "large": "/__media__/photos/fooz_portrait_large.jpg"
                }
            },

            {
                "uid": "person4", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Too",
                    "nickname": "",
                    "additionalName": "P.",
                    "familyName": "Mar"
                },
                "primaryTitle": "Blah",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-3607"
                    },

                    {
                        "type": "Home", 
                        "value": "555-4717"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/Xportrait_small.jpg", 
                    "medium": "/__media__/photos/Xportrait_medium.jpg", 
                    "large": "/__media__/photos/Xportrait_large.jpg" 
                }
            }
        ]
    }
]

Answer 1

您有一个对象数组，每个对象都有一个 people 属性，并且属性值是一个数组。

因此您需要使用嵌套 ng-repeat 来首先遍历主数组，然后在该重复的每次迭代中，遍历内部数组

<ul ng-repeat="item in people"> 
   <li ng-animate="'animate'" ng-repeat="person in item.people | filter: ...">

将 AngularJS 与嵌套在数组中的数组中的 JSON 对象一起使用，如何将数据放入 html？

Using AngularJS with JSON objects in arrays nested within an array, how can I get the data into the html?

javascript

arrays

json

nested

angularjs