如何获取数据从$ http请求的角度ui.grid露面 [英] How do I get data to show up in angular ui.grid from an $http request
问题描述
我使用的打字稿及AngularJS。我有一个包含ui.grid指令的模板。
I am using Typescript and AngularJS. I have a template that contains a ui.grid directive.
显示网格，并在以后的某个时间$ http请求得到我想要的网格包含的数据。
The grid is displayed and at some later time an $http request gets the data I want the grid to contain.
我试过gridOptions.data设置到一个数组和$ HTTP调用成功功能我设置用于gridOptions.data返回的数据数组。
I tried setting the gridOptions.data to an array and in the success function of the $http call I set the array used for gridOptions.data to the returned data.
网格显示什么。
任何想法？
我要庆祝罗马的答案正确的，但因为我指定我用的是打字稿我会告诉我的完整的解决方案：
I'm going to mark Roman's answer correct, but since I specified I was using Typescript I'll show my solution for completeness:
export class MyController {
constructor ( ) {
//...code to setup grid, col defs, data as an empty array, etc...
var myDataPromise = this.myHttpService.getDataForGrid();
myDataPromise.then((data) => {
this.gridOptions.data = data["value"];
},(reason) => { },(update) => { });
}
}
我的模板：
<div ui-grid='myController.gridOptions'></div>
我不知道为什么我原来的code没有老老实实工作......我认为打字稿和角度一起刚刚炸我的大脑早就...
I'm not sure why my original code didn't work honestly...I think Typescript and Angular together was just frying my brain early on...
推荐答案
请尝试以下操作：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body ng-app="app">
<div ng-controller="gridController">
<!-- Initialise the grid with ng-init call -->
<div ui-grid="gridOptions" ng-init="GetGridData(urlList)">
</div>
</div>
<script src="Scripts/ng/angular.min.js"></script>
<script src="Scripts/ng-grid/ui-grid.min.js"></script>
<link rel="Stylesheet" type="text/css" href="Scripts/ng-grid/ui-rid.min.css" />
<script type="text/javascript">
var app = angular.module('app', ['ui.grid']);
app.controller("gridController",
["$scope", "$attrs", "$element", "$compile", "$http", "$q",
function ($scope, $attrs, $element, $compile, $http, $q)
{
$scope.urlList = "YourSourceUrl";
function fnGetList(url)
{
var deferred = $q.defer();
$http.get(url)
.success(function (data)
{
deferred.resolve(data);
})
.error(function (errorMessage)
{
alert(errorMessage);
deferred.reject;
});
return deferred.promise;
};
$scope.GetGridData = function (url)
{
console.log("In GetGridData: " + "Getting the data");
// Test Only - un-comment if you need to test the grid statically.
//$scope.loadData = ([
// {
// "UserName": "Joe.Doe",
// "Email": "Joe.Doe@myWeb.com"
// },
// {
// "UserName": "Jane.Doe",
// "Email": "Jane.Doe@myWeb.com"
// },
//]);
//return;
fnGetList(url).then(function (content)
{
// Assuming your content.data contains a well-formed JSON
if (content.data !== undefined)
{
$scope.loadData = JSON.parse(content.data);
}
});
};
$scope.gridOptions =
{
data: 'loadData',
columnDef:
[
{ field: 'UserName', name: 'User' },
{ field: 'Email', name: 'e-mail' }
]
};
}
]);
</script>
</body>
如果您不想立即填充网格，删除调用
If you do not want to populate the grid immediately, delete the call to
NG-INIT
和呼吁其他一些事件相关的功能。
and call the associated function on some other event.
我们希望，不知道更多关于你的具体问题，这将引导您到解决方案。
Hopefully, without knowing much more about your specific problem, this will guide you to the solution.
干杯。
这篇关于如何获取数据从$ http请求的角度ui.grid露面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
