Question

我正在使用带有JSON数据的AngularJS构建电话目录应用。我是AngularJS和JSON的新手。

我浏览了AngularJS网站上的“Phonecat”教程，并且能够使用类似于教程的JSON数据构建测试目录。

我使用我在那里学到的东西遇到了障碍，并试图用真实数据构建一些东西; JSON对象有多个数组，我无法弄清楚如何访问数组中的数据......

我试图在这里复制我的问题：http://jsfiddle.net/4ykNX/

提前致谢！

//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"
        }
    ]
}

Answer 1

您正尝试将$scope.employees设置为data，其时间应为data.entries

'use strict';

function EmpListCtrl($scope, $http) {
    $http.get('employees.json').success(function(data) {
    $scope.employees = data.entries;
  });
}

然后您需要引用employee.phone而不是phone：

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

这是一个plnkr：http://plnkr.co/edit/L2nMu0?p=preview

使用AngularJS从JSON访问多个数组中的多个项目

1 个答案: