Dane wiązania z żądania $ http.get() do ng-repeat

Dostaję dane moje JSON z serwera, ale problem pojawia się, gdy próbuję wyświetlić go na mojej stronie przy użyciu dyrektywy ng-repeat.

Oto moje ciało zawartość HTML, gdzie 'mydata' (array JSON) jest pokazany poprawnie jak tylko $ http.get() sposób otrzymuje żądane dane, ale ng-powtórzyć nie jest wykaz elementów tablicy:

<body ng-app="myapp"> 
    <div ng-controller="MyController" > 
    Data from server: {{ mydata }}   
    </div> 

    <hr> 

    <ul ng-controller="MyController as controller"> 
    <li ng-repeat="data in controller.mydata"> 
     {{ data }} 
    </li> 
</ul> 
</body>

A oto kod JavaScript:

var URI = 'http://my_service_uri/'; 

angular.module("myapp", []) 
    .controller("MyController", function($scope, $http) { 
     $scope.mydata = []; 

     $http.get(URI) 
      .then(function(result) { 
       $scope.mydata = result.data; 
      }); 
    });

Źródło

2014-11-02 charliebrownie

Ty mieszania kontrolera jako składni i używanie zakresu. Zobacz mój plunker na http://plnkr.co/qpcKJZx4jovC6YdzBd6J, a zobaczysz przykład.

Główna zmiana polega na użyciu kontrolera jako składni, do której należy powiązać zmienne.

app.controller('MyController', function($http) { 
    var vm = this; 
    vm.mydata = []; 

    $http.get(URI) 
     .then(function(result) { 
      console.log(result); 
      vm.mydata = result.data; 
     });

Wybierz jedną z metod publikowania danych widoku i trzymaj się z nim kontrolera jako lub $ scope.

Zauważysz, że najlepsze "Dane z serwera" nie działają już w plunkerze, ponieważ nie zmieniłem tego, aby używać kontrolera jako składni.

Źródło

2014-11-02 21:46:19 rtucker88

Dziękuję za odpowiedź, działa idealnie teraz. Widzę, co robiłem źle, i dziękuję za radę, trzymam się jednej metody publikowania danych widoku, albo kontroler jako albo $ zasięg. – charliebrownie

Użyłem tego podejścia bez powodzenia, aż w końcu użyłem '$ scope. $ Apply();' po którym spełniono ng-repeat. – ThisClark

Dane wiązania z żądania $ http.get() do ng-repeat

Odpowiedz

Powiązane problemy