如何从$http请求延续中获得显示在angular ui.grid中的数据
How do I get data to show up in angular ui.grid from an $http request continuation
好的,我会尽量缩短。
我已经学习Angular一段时间了,还有很多东西需要学习,现在我正在努力弄清楚如何在一个对我来说全新的服务中用头连接端到端,因为我从未做过端到端集成。
下面的代码是从另一个堆栈溢出答案中提供的,我想知道的是如何将它们与say dataService.js连接起来。这对我来说都是新的,所以我试图以最好的方式问这个问题。
<!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>
提供自:如何从$http请求
我使用的方法是将URL作为AJAX调用传递,然后等待数据返回,然后将JSON数据连接到ng网格。请注意,从URL取回数据会有延迟,并且您必须有一个计时器来检查数据返回是否开始有效。
function setCar(){
$.ajax({
type: "POST",
url: '/Test/ConfigConnect.json?details=&car='+car+'&id=1',
dataType: 'json',
success: function(data){
configData = data;
}
});}
作为javascirpt的一部分的定时器函数也在下面给出。
var timer = setInterval(function() {
$scope.$apply(updatePage);
}, 500);
var updatePage = function() {
if (typeof configData !== 'undefined')
{
clearInterval(timer);
$scope.loadData = configData;
}
};
相关文章:
- angular js密码强度显示问题
- 如何在html angular中显示嵌套的json元素
- Angular渲染元素,但不渲染;t显示数据
- 在模板angular 2中显示JSON对象
- Angular UI-GRID未在页面上显示网格
- 使用Angular显示JSON中的HTML
- 在Bootstrap+Angular中一个接一个地显示警报
- 如何在Angular JS中滚动显示元素
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- 使用angular显示复杂json中的列表
- angular ui boostrap日期选择器显示年份第一
- 显示Angular 2 JSON对象
- 突出显示 Angular JS 中的过滤行
- 项目仅在键入后显示?Angular js.
- 过滤结果以显示与ng匹配的结果显示angular js
- 只有$touch为true时才会显示angular ng消息
- 有哪些方法可以以非表格格式显示Angular中的JSON数据
- 为什么后面的HTML代码仍然显示angular代码,而不是纯HTML
- 如何避免在JavaScript代码中断并抛出异常时显示angular标记
- 更新列表中的项目,当点击时显示- Angular JS