2016-03-31 26 views
2

RESTful Web Hizmeti Tüketiyorum AngularJS kullanarak bir API tüketme hakkında bazı öğreticiler üzerinden gidiyorum ... {{greeting.id}} ve {{greeting.content}} çalıştırmaya çalışırken sorunlara koşuyorum. Bunun sonuçları oluşturduğunu varsayıyorum, ancak ekranımda görünmüyorlar. İşte AngularJS ile

benim CodePen geçerli: http://codepen.io/ChaseHardin/pen/bprObb/

  1. https://spring.io/guides/gs/consuming-rest-angularjs/
  2. http://codepen.io/theshravan/pen/mnbcx

neden benim id ve UI içerik ekran; HTML veya JavaScript'imle ilgili sorun mu var?

HTML

<html> 
<head> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="GreetingController" class="container"> 
    <h1>Greeting</h1> 
    <hr/> 
    <div ng-repeat="greeting in greetings" class="col-md-6"> 
     <h4>{{greeting.id}}</h4> 
     <p>{{greeting.content}}</p> 
    </div> 
    </div> 
</body> 
</html> 

JavaScript

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

myApp.controller("GreetingController", function ($scope, $http) { 
    $http.get('http://rest-service.guides.spring.io/greeting'). 
    success(function (data) { 
     $scope.greeting = data; 
    }); 
}); 

cevap

1

ng tekrarı çıkarın. Sonuçlar bir dizide değil.

+0

Teşekkür @Michael, hile yaptığını ... Ben cevap olarak iţaretleriz. Son bir soru, eğer birden fazla JSON verisi döndürdüyse veya bazı ng-repeat'a ihtiyaç duyarsam, bu aynı şekilde çalışır mıydı? – ChaseHardin

+0

Evet, veriler bir dizide olsaydı ng-repeat mükemmel şekilde çalışırdı. Bunu kodpen'de test edebilirsin, ben çektim ve sonuçları bir dizi yaptı ... http://codepen.io/mkl/pen/vGJvLv – Michael

+0

Harika, teşekkür ederim! – ChaseHardin

1

İşte siz gidin;

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

myApp.controller("GreetingController", function ($scope, $http) { 
    $http.get('http://rest-service.guides.spring.io/greeting').then(function (data) { 
     $scope.greetings = data; 
     console.log(data); 
    }); 
});