Pobierz dane Ajax do siatki Angulara

Używając siatki kątowej, otrzymuję ajax, pobierając dane z pliku console.log. Ale pusta siatka.Pobierz dane Ajax do siatki Angulara

Dziennik konsola odczytuje:

[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); >

Jest to plik js.

// 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 pliku:

// 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();  
});

pliku HTML.

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

Źródło

2013-02-27 Merlin

Twój kontroler prawdopodobnie uzyskuje dostęp do tablicy getData, zanim zakończy się .success. Natychmiast uzyskujesz dostęp do zmiennej poza funkcją obietnicy, która jest inicjowana do pustej tablicy.

Dlaczego nie spróbować wstawić funkcji fetchData do kontrolera (na razie) i zapisać getData bezpośrednio do $ scope.myData w .success? Może nawet zainicjować siatkę właśnie tam? Nie wiem, czy można to zrobić, ale jeśli mogłoby to wyglądać tak:

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();  
});

(źródło dla niektórych z zakresu $ zastosować materiał: https://github.com/angular-ui/ng-grid/issues/39)

Również nie wiem, dlaczego jesteś mieszanie w jQuery .ajax z kodami kątowymi ($ http to zrobi) i dlaczego żaden z twoich javascript nie ma średnika.

Źródło

2013-02-27 19:50:48

Jak zdefiniować $ http? – Merlin

Przepraszam, zaktualizowałem fragment kodu. Po prostu wstrzykujesz to w taki sam sposób, jak $ scope. $ http to podstawowa usługa kątowa. Jeśli masz RESTful API, możesz także użyć $ resource do dalszej analizy. –

Zrobiłem to; zwrócił błąd "opcje są niezdefiniowane" – Merlin

Byłoby znacznie łatwiejsze (i bardziej kątowe), jeśli zdefiniujesz usługę dla swojego żądania. Coś wzdłuż tych linii:

angular.module('hellServices', ['ngResource']) 
    .factory('Hell', function ($resource) { 
    return $resource('URL/TO/HELL', {}, { 
     query: { method: 'GET' } 
    }); 
    });

Upewnij się, aby umieścić go w swojej aplikacji:

var app = angular.module('myApp', ['ngGrid', 'hellServices']);

Następnie można uzyskać obietnicę dla niej w kontrolerze:

app.controller('MyCtrl', function($scope, $http, Hell) { 
$scope.myData = Hell.query();

a następnie ustaw opcje siatki, aby spojrzeć na obietnicę danych (tak jak wcześniej):

$scope.gridOptions = { 
    data: 'myData', 
    showGroupPanel: true 
};

Jeśli to zrobisz, nie musisz się martwić o zakres $. $ Apply, ponieważ będzie on dla ciebie obsługiwany. To jest o wiele czystsze i łatwiejsze do naśladowania. Jeśli nadal potrzebujesz oddzwanianie do modyfikacji danych po jego powrocie z serwera, przekazać funkcję do funkcji query() swojej służby:

... 
$scope.myData = Hell.query(function(hell) { 
    // code that modifies 'hell' 
});

Sprawdź official docs na kątowe Services. Podstawy są również opisane w Step #11 z oficjalnego samouczka Angular JS.

Źródło

2013-03-06 18:13:38 Benmj

Pobierz dane Ajax do siatki Angulara

Odpowiedz

Powiązane problemy