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; }
}
上
Employeesオブジェクト上の単一引用符を削除を変更。 〜$ scope.Employees = [];従業員を使用していた場所であればどこでも同じように更新されました。 –