Wie bekomme ich Daten in angular ui.grid aus einer $ HTTP-Anfrage Fortsetzung

Okay, ich werde dies so kurz wie möglich halten.

Ich habe Angular jetzt ein wenig studiert und es gibt noch viel zu lernen, gerade jetzt versuche ich herauszufinden, wie man Ende an Ende mit Kopfzeilen in einem Dienst verbindet, der für mich völlig neu ist wie ich noch nie Ende-zu-Ende-Integration getan habe.

Der folgende Code wird von einer anderen Stapelüberlauf Antwort zur Verfügung gestellt und was ich wissen möchte ist, wie verbinde ich was sie haben mit sagen DataService.js. Das ist alles neu für mich, also versuche ich es so gut wie möglich zu stellen.

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

bereitgestellt aus: How do I get data to show up in angular ui.grid from an $http request

Quelle

2016-04-14 Dr Mints

$ scope.urlList = "YourSourceUrl"; <== Haben Sie eine URL, die Sie verwenden, ist sie korrekt eingerichtet und können Sie sehen, dass sie Daten über Postman oder ein anderes Tool zurückgibt? –

Verfahren ich verwende, ist die URL als einen Ajax-Aufruf übergeben und dann warten, bis die Daten nach dem, um wieder ich die JSON Daten an den ng-Netz anzuschließen. Beachten Sie, dass es eine Verzögerung beim Abrufen der Daten von der URL gibt, und Sie müssen über einen Timer verfügen, der die Gültigkeit der Datenrückgabe überprüft.

function setCar(){ 
$.ajax({ 
    type: "POST", 
    url: '/Test/ConfigConnect.json?details=&car='+car+'&id=1', 
    dataType: 'json', 
    success: function(data){ 
     configData = data; 
    } 
});}

Die Timer-Funktion, die Teil des Javascirpt ist, ist auch unten angegeben.

var timer = setInterval(function() { 
     $scope.$apply(updatePage); 
}, 500); 

var updatePage = function() {  
    if (typeof configData !== 'undefined') 
    { 
     clearInterval(timer); 
     $scope.loadData = configData; 
    } 
};

Quelle

2016-04-14 22:34:48 user4534599

Ich freue mich über das Feedback, sorry für die Antwort nicht :) –

Wie bekomme ich Daten in angular ui.grid aus einer $ HTTP-Anfrage Fortsetzung

Antwort

Verwandte Themen