2017-01-25 25 views
0

我正在使用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 }] 

}; 

});

Employee類

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

回答

1

請改變data: Employees,代替data: 'Employees',

data PARAMS

+0

我已經從變種僱員= []更新卸下Employees對象上的單引號;到$ scope.Employees = [];並更新相同的地方,我已經使用員工現在的作品。 –

相關問題