Angularjs 如何从$http请求获取数据以显示在angular ui.grid中
我正在使用Typescript和AngularJS。我有一个包含ui.grid指令的模板 将显示网格,稍后,$http请求将获取我希望网格包含的数据 我尝试将gridOptions.data设置为数组,并在$http调用的success函数中,将用于gridOptions.data的数组设置为返回的数据 网格没有显示任何内容 有什么想法吗 我将标记Roman的答案是否正确,但由于我指定使用的是Typescript,因此为了完整性,我将展示我的解决方案:Angularjs 如何从$http请求获取数据以显示在angular ui.grid中,angularjs,typescript,angular-ui-grid,Angularjs,Typescript,Angular Ui Grid,我正在使用Typescript和AngularJS。我有一个包含ui.grid指令的模板 将显示网格,稍后,$http请求将获取我希望网格包含的数据 我尝试将gridOptions.data设置为数组,并在$http调用的success函数中,将用于gridOptions.data的数组设置为返回的数据 网格没有显示任何内容 有什么想法吗 我将标记Roman的答案是否正确,但由于我指定使用的是Typescript,因此为了完整性,我将展示我的解决方案: export class MyContro
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>
我不知道为什么我的原始代码不能正常工作…我认为Typescript和Angular在早期只是在煎熬我的大脑…尝试以下方法:
<!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>
var-app=angular.module('app',['ui.grid']);
app.controller(“gridController”,
[“$scope”、“$attrs”、“$element”、“$compile”、“$http”、“$q”,
函数($scope、$attrs、$element、$compile、$http、$q)
{
$scope.urlist=“YourSourceUrl”;
函数fnGetList(url)
{
var deferred=$q.deferred();
$http.get(url)
.成功(功能(数据)
{
延迟。解析(数据);
})
.错误(功能(错误消息)
{
警报(错误消息);
推迟。拒绝;
});
回报。承诺;
};
$scope.GetGridData=函数(url)
{
log(“在GetGridData中:“+”获取数据”);
//仅测试-如果需要静态测试网格,请取消注释。
//$scope.loadData=([
// {
//“用户名”:“Joe.Doe”,
//“电子邮件”:“乔。Doe@myWeb.com"
// },
// {
//“用户名”:“Jane.Doe”,
//“电子邮件”:“简。Doe@myWeb.com"
// },
//]);
//返回;
fnGetList(url).然后(函数(内容)
{
//假设content.data包含格式良好的JSON
if(content.data!==未定义)
{
$scope.loadData=JSON.parse(content.data);
}
});
};
$scope.gridOptions=
{
数据:“loadData”,
columnDef:
[
{字段:'UserName',名称:'User'},
{字段:“电子邮件”,名称:“电子邮件”}
]
};
}
]);
如果不想立即填充网格,请删除对的调用
ng init
并在其他事件上调用关联函数
希望在不了解更多具体问题的情况下,这将引导您找到解决方案
干杯。很难说,你能提供一些代码吗?行,我必须把一些通用的东西放在一起。我会尽快更新帖子。谢谢