data - ng cloak angularjs example
¿Cómo puedo obtener datos para mostrar en angular ui.grid desde una solicitud de $ http? (1)
Pruebe lo siguiente:
<!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": "[email protected]"
// },
// {
// "UserName": "Jane.Doe",
// "Email": "[email protected]"
// },
//]);
//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>
Si no desea rellenar la cuadrícula inmediatamente, elimine la llamada a
ng-init
y llamar a la función asociada en algún otro evento.
Con suerte, sin saber mucho más sobre su problema específico, esto lo guiará a la solución.
Aclamaciones.
Estoy usando Typescript y AngularJS. Tengo una plantilla que contiene una directiva ui.grid.
Se muestra la cuadrícula y en algún momento posterior una solicitud $ http obtiene los datos que quiero que contenga la cuadrícula.
Intenté configurar gridOptions.data en una matriz y en la función de éxito de la llamada $ http configuré la matriz utilizada para gridOptions.data en los datos devueltos.
La grilla no muestra nada.
¿Algunas ideas?
Voy a marcar correctamente la respuesta de Roman, pero como especifiqué que estaba usando Typescript, mostraré mi solución como completa:
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) => { });
}
}
Mi plantilla:
<div ui-grid=''myController.gridOptions''></div>
No estoy seguro de por qué mi código original no funcionó honestamente ... Creo que Typescript y Angular juntos solo me estaban friendo el cerebro al principio ...