使用AngularJS使用RESTful Web服务

时间：2021-03-05 05:29:34

I'm going through a few tutorials on consuming an API using AngularJS... I'm running into issues while trying to run {{greeting.id}} and {{greeting.content}}. I'd assume that this renders the results, but they are not visible on my screen.

我将学习一些使用AngularJS使用API的教程。当我试图运行{{欢迎}时，我遇到了一些问题。id } }和{ { greeting.content } }。我假设这将呈现结果，但是它们在我的屏幕上是不可见的。

Here is my CodePen: http://codepen.io/ChaseHardin/pen/bprObb/

这是我的代码页:http://codepen.io/ChaseHardin/pen/bprObb/

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

Why doesn't my id and content display on the UI; is the issue with my HTML or JavaScript?

为什么我的id和内容不在UI上显示?我的HTML或JavaScript有问题吗?

HTML

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

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

2 个解决方案

#1

1  

Remove the ng-repeat. The results aren't in an array.

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

#2

1  

Here you go;

给你;

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

#1

1  

Remove the ng-repeat. The results aren't in an array.

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

#2

1  

Here you go;

给你;

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);
    });
});
标签：

相关文章