與AngularJS一起使用REST風格的Web服務

我正在通過一些關於使用AngularJS來使用API的教程...我在嘗試運行{{greeting.id}}和{{greeting.content}}時遇到了問題。我假設這會呈現結果，但它們在我的屏幕上不可見。與AngularJS一起使用REST風格的Web服務

這裏是我的CodePen：http://codepen.io/ChaseHardin/pen/bprObb/

https://spring.io/guides/gs/consuming-rest-angularjs/

http://codepen.io/theshravan/pen/mnbcx

爲什麼我的ID，並在UI上內容顯示;是我的HTML或JavaScript的問題？

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

來源

2016-03-31 ChaseHardin

刪除NG重複。結果不在數組中。

來源

2016-03-31 01:30:53 Michael

謝謝@Michael，那就是訣竅......我會把這個標記爲答案。最後一個問題，如果返回了多行JSON數據，或者我需要一些'ng-repeat'，它是否會以相同的方式工作？ – ChaseHardin

是的，如果數據在一個數組中，ng-repeat可以完美工作。你可以在codepen中測試它，我已經分叉它並將結果作爲一個數組... http://codepen.io/mkl/pen/vGJvLv – Michael

太棒了，謝謝！ – ChaseHardin

你在這裏;

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

來源

2016-03-31 01:32:07

與AngularJS一起使用REST風格的Web服務

回答

相關問題