Question

我正在使用angularjs和web api。我从我的api返回了一个列表，并尝试使用ng-grid在网格中显示它们。下面是我的代码。任何人都可以帮助我。

设计

<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<link href="~/Content/ng-grid.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.min.js"></script>
<script src="~/Scripts/custom/cell_edit.js"></script>
</head>
<body ng-controller="MyCtrl">
    <div class="col-md-6">
        <br /><br />
        <div class="col-md-12">
            <h4>
                <em>*</em> First Name:
            </h4>
            <input type="text" class="form-control input" name="firstName" ng-model="firstName" required placeholder="Enter first name" /><br />
        </div>
        <div class="col-md-12">
            <h4><em>*</em>Last Name</h4>
            <input type="text" class="form-control input" name="lastName" ng-model="lastName" required placeholder="Enter last name"><br /><br />
        </div>
        <div class="col-md-12" align="left">               
            <button style="color:white" class="btn btn-primary" ng-click="GetData()">GetEmployees</button>
        </div>

        <div class="col-md-12" ng-grid="gridOptions" />
  </div>
 </body>
 </html>

阿比

 [HttpGet]
    [Route("api/ServerRequest/GetMyData")]
    public IHttpActionResult GetMyData()
    {
        var items = new[] { 
            new Employee{FirstName = "John", LastName = "Doe"},
            new Employee{FirstName = "Ann", LastName = "Wellington"},
            new Employee{FirstName = "Sabrina", LastName = "Burke"}
        };
        return Ok(items);

    }

JS档案

 var app = angular.module('myApp', ['ngGrid']);
 app.controller('MyCtrl', function ($scope, $http) {

var Employees = [];


$scope.GetData = function () {
    $http.get('/api/ServerRequest/GetMyData')
    .success(function (response) {
        console.log(response);

        response.forEach(function (item) { Employees.push(item); });  

        console.log(Employees.length);

    })
    .error(function (response) {
        $scope.ResponseDetails = "response: " + response;

        alert("failed..");
    });
};

$scope.gridOptions = {
    data: 'Employees',
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEditOnFocus: true,
    showColumnMenu: true,
    resizable: true,
    showSelectionCheckbox: true,
    columnDefs: [{ field: 'FirstName', displayName: 'FirstName', enableCellEdit: true },
                 { field: 'LastName', displayName: 'LastName', enableCellEdit: true }]

};

}）;

员工类

 public class Employee
  {
    public string FirstName { get; set; }
    public string LastName { get; set; }
  }

Answer 1

请更改data: Employees,而不是data: 'Employees',

删除Employees参数

上data对象的单引号

无法读取响应数据并将数据添加到我的网格中

1 个答案: