Question

我正在阅读一些关于使用AngularJS消费API的教程...我在尝试运行{{greeting.id}}和{{greeting.content}}时遇到了问题。我假设这会渲染结果，但它们在我的屏幕上不可见。

以下是我的CodePen： https://thealmightyone.github.io/AMAclient


http://codepen.io/ChaseHardin/pen/bprObb/

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

为什么我的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;
    });
});

Answer 1

删除ng-repeat。结果不在数组中。

Answer 2

你走了;

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

使用AngularJS使用RESTful Web服务

2 个答案: