1

我正在创建一个简单的 Web API 项目并尝试使用 angularjs 访问该 API 响应。在 web API 项目中，我有以下两个类。

public partial class Employee : BaseEntity
{
    public System.Guid EmpId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public System.DateTime BirthDate { get; set; }
    public string EmailId { get; set; }
    public string ContactNumber { get; set; }
    public string Address { get; set; }
    public System.Guid DeptId { get; set; }
   // public System.DateTime LastModify { get; set; }

    public virtual Department Department { get; set; }
}

和

public partial class Department : BaseEntity
{
    public Department()
    {
        this.Employees = new HashSet<Employee>();
    }

    public System.Guid DeptId { get; set; }
    public string Name { get; set; }

    public virtual ICollection<Employee> Employees { get; set; }
}

我创建了一个 get 方法，例如

// GET: api/Employees
    public IQueryable<Employee> GetEmployees()
    {
        return _db.Employees;
    }

我运行该项目，它运行良好，但我得到了类似的响应

[
{
    "$id": "1",
    "Department": {
        "$id": "2",
        "Employees": [
            {
                "$ref": "1"
            },
            {
                "$id": "3",
                "Department": {
                    "$ref": "2"
                },
                "EmpId": "2fd221ec-c605-4c88-9d60-675e30f1bf8b",
                "FirstName": "Namit",
                "LastName": "Kumar",
                "BirthDate": "1990-06-26T00:00:00",
                "EmailId": "namit@gmaiil.com",
                "ContactNumber": "9052390048",
                "Address": "Mumbai",
                "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
                "DateCreated": null,
                "UserCreated": null,
                "LastModify": "2016-06-26T12:42:20.66",
                "UserModified": null
            },
            {
                "$id": "4",
                "Department": {
                    "$ref": "2"
                },
                "EmpId": "b2b8dede-5635-4879-86d6-8bca346b30e8",
                "FirstName": "Manish",
                "LastName": "Kumar",
                "BirthDate": "1990-12-07T00:00:00",
                "EmailId": "manishki@live.com",
                "ContactNumber": "9052390048",
                "Address": "Hyderabad",
                "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
                "DateCreated": null,
                "UserCreated": null,
                "LastModify": "2016-06-26T10:34:58.57",
                "UserModified": null
            }
        ],
        "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
        "Name": "Information Technology (IT) ",
        "DateCreated": null,
        "UserCreated": null,
        "LastModify": "2016-06-26T10:33:07.19",
        "UserModified": null
    },
    "EmpId": "7448ce2b-577d-4ccb-8ab5-1c9a51cda6f4",
    "FirstName": "xyz",
    "LastName": "abc",
    "BirthDate": "1991-03-17T00:00:00",
    "EmailId": "manishki@live.com",
    "ContactNumber": "0000000000",
    "Address": "BGP",
    "DeptId": "844ec309-a17e-40b5-ae36-bff8e9bd2949",
    "DateCreated": null,
    "UserCreated": null,
    "LastModify": "2016-06-26T19:03:53.307",
    "UserModified": null
},
{
    "$ref": "3"
},
{
    "$ref": "4"
}
]

在另一个角度项目中，我创建了简单的控制器，例如

(function(app) {  
var listController = function ($scope, $http) {

   $http.get("http://..../api/Employees").then(function (data) {
       $scope.employees = data;


   });   



 };
   app.controller("listController", listController);  
}(angular.module("empDemo")));

在 html 中，我尝试使用以下代码显示响应

 <div class="table-responsive" ng-controller="listController">
      <!--{{employees.Department.data}}-->

            <table class="table table-bordered">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Birth Date</th>
                    <th>Email</th>
                    <th>Contact Number</th>
                    <th>Address</th>
                    <th>Department</th>
                </tr>
            </thead>
                <tbody>

                    <tr ng-repeat="employee in employees.data">
                        <td>{{employee.FirstName}}</td>
                        <td>{{employee.LastName}}</td>
                        <td>{{employee.BirthDate}}</td>
                        <td>{{employee.EmailId}}</td>
                        <td>{{employee.ContactNumber}}</td>
                        <td>{{employee.Address}}</td>
                        <td>{{employee.Department.Name}}</td>
                    </tr>
                </tbody>
        </table>

当我运行 List.html 时，我总是只得到最后一行。请指导我如何获取所有行。在这里我不确定，我从我的服务中得到了错误的响应，或者我在使用 angularJS 解析响应时遗漏了一些东西。

4

0 回答 0