阿贾克斯获取到数据网格角 [英] Get Ajax data into Angular grid
问题描述
使用角度网格，我得到了阿贾克斯的console.log获取数据。但是，一个空网格。
控制台日志上写着：
[13：56：11.411现在！
[13：56：11.412] []
[13：56：11.412现在！
[13：56：11.556]＆LT;还有就是从执行console.log（的getData）返回的数据; ＆GT;
这是JS文件。
// main.js
VAR应用= angular.module（'对myApp'，['ngGrid']）;变种的getData = [];功能fetchData（）{
VAR MYDATA = []; $阿贾克斯（{
网址：'/ URL /到/地狱'，
输入：GET，
成功：功能（数据）{ 对于（i = 0，J = data.length; I＆LT;焦耳;我++）{
MYDATA [I] =数据[I]
}
的getData = MYDATA;
的console.log（的getData）;
}
}）;
}
fetchData（）;
app.controller（'MyCtrl'，函数（$范围）{ 的console.log（'现在！'）
的console.log（的getData）
的console.log（'现在！'） $ scope.myData =的getData
$ scope.gridOptions = {
数据：myData的，
showGroupPanel：真
};
}）;
新的js文件：
// main.js
VAR应用= angular.module（'对myApp'，['ngGrid']）;app.controller（'MyCtrl'，函数（$范围，$ HTTP）{
功能fetchData（）{
$ HTTP（{
网址：'/ URL /到/地狱'，
输入：'GET'}）
.success（功能（数据）{
$ scope.myData =数据;
$ scope.gridOptions = {
数据：myData的，
showGroupPanel：真
};
}）;
}
fetchData（）;
}）;
HTML文件。
＆LT; HTML NG-应用=对myApp＆GT;
＆LT;头LANG =ENGT＆;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;空白标题3'; /标题＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =http://angular-ui.github.com/ng-grid/css/ng-grid.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =../静态/ CSS / style.css文件/＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =../静态/ JS / main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT; ＆LT;机身NG控制器=MyCtrl＆GT; ＆LT; DIV CLASS =gridStyleNG格=gridOptions＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您控制器可能访问的getData阵列.success完成之前。您所访问的变量向右走，一个承诺的功能，它被初始化为空数组之外。
你为什么不尝试把fetchData功能到控制器（现在），并直接存储到的getData $ scope.myData在.success？甚至初始化格在那里呢？不知道如果你能做到这一点，但如果你能是这样的：
app.controller（'MyCtrl'，函数（$范围，$ HTTP）{
$ scope.myData ='';
$ scope.gridOptions = {showGroupPanel：真实，数据：myData的'};
功能fetchData（）{
的setTimeout（函数（）{
$ HTTP（{
网址：'/ URL /到/地狱'，
输入：'GET'}）
.success（功能（数据）{
$ scope.myData =数据;
如果（！$范围。$$阶段）{
$ $范围适用于（）。
}
}）;
}，3000）;
}
fetchData（）;
}）;
（来源对于一些$范围适用的东西：<一href=\"https://github.com/angular-ui/ng-grid/issues/39\">https://github.com/angular-ui/ng-grid/issues/39)
另外不知道你为什么jQuery的混合具有角code（$ HTTP会做到这一点），为什么没有你的JavaScript有一个分号。
阿贾克斯Using Angular Grid, I get the ajax get data in console.log. But an empty grid.
The console log reads:
[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.412] now!!
[13:56:11.556] <there is data returned from console.log(getData); >
This is the js file.
// main.js
var app = angular.module('myApp', ['ngGrid']);
var getData = [];
function fetchData() {
var mydata = [];
$.ajax({
url:'/url/to/hell',
type:'GET',
success: function(data) {
for(i = 0, j = data.length; i < j; i++) {
mydata[i] = data[i];
}
getData = mydata;
console.log(getData);
}
});
}
fetchData();
app.controller('MyCtrl', function($scope) {
console.log('now!!')
console.log(getData)
console.log('now!!')
$scope.myData = getData
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
New Js file:
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
function fetchData() {
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
$scope.gridOptions = {
data: 'myData',
showGroupPanel: true
};
});
}
fetchData();
});
HTML file.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Blank Title 3</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="../static/js/main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Your controller is probably accessing the getData array before the .success is finished. You're accessing the variable right away, outside of a promise function, which is initialized to an empty array.
Why don't you try putting the fetchData function into the controller (for now) and storing the getData directly into $scope.myData in the .success? Maybe even initialize the grid right there too? Not sure if you can do that but if you could it would look like this:
app.controller('MyCtrl', function($scope, $http) {
$scope.myData = '';
$scope.gridOptions = { showGroupPanel: true, data: 'myData' };
function fetchData() {
setTimeout(function(){
$http({
url:'/url/to/hell',
type:'GET'})
.success(function(data) {
$scope.myData = data;
if (!$scope.$$phase) {
$scope.$apply();
}
});
}, 3000);
}
fetchData();
});
(source for some of the $scope apply stuff: https://github.com/angular-ui/ng-grid/issues/39)
Also not sure why you're mixing in jQuery .ajax with angular code ($http will do that), and why none of your javascript has a semicolon.
这篇关于阿贾克斯获取到数据网格角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
