insertar example data cloak agregar angularjs typescript angular-ui-grid

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 ...