与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服务

回答

相关问题