Question

AngularJS：无法查看来自 REST 的数据

2015-07-14

384

javascript json angularjs rest

我正在开发一个 Web 应用程序并使用 AngularJS 将来自 REST API 的一组位置显示到模板上，我需要帮助才能将其显示在模板上。如何获取 REST 数据列表以显示在 html 模板上？

index.html：

 <!DOCTYPE html>
<html ng-app="countryApp">
  <head>
  <title>Angular App</title>
  <script src="js/angular.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/app.js"></script>
  </head>

  <body>
    <!--stuff--> 
    <div ng-view=""></div>

    <!--end stuff--> 
  </body>
</html>

view/all_locations.html

<div ng-controller="AllLocations"> 

   <h3>Hello</h3>

    <ul><li ng-repeat="location in locations"><p>{{locations.location_id}}<p></p></li><ul>

app.js 文件

//app.js
var countryApp = angular.module('countryApp', ['ngRoute']);
      countryApp.config(function($routeProvider) {
        $routeProvider. 
           when('/', {
             templateUrl: 'views/all_locations.html',
             controller: 'AllLocations'
           }).
           when('/:location_id', {
               templateUrl: 'views/view_location.html',
              controller: 'ViewLocation'
           }).
           otherwise({
             redirectTo: '/'
           });
        });
      countryApp.controller('AllLocations', function ($scope, $http){
        $http.get('http://localhost/slimtest2/locations').success(function(data) {
              $scope.locations = data;
            });
        });
      countryApp.controller('ViewLocation', function ($scope, $routeParams){
        console.log($routeParams);
      });

来自 REST API 的 JSON 数据

{ "locations" :[{"location_id":"2","location_reference":"657821349","location_title":"Guam Premier Outlet,? ???? ???"},{"location_id":"3","location_reference":"5328016947","location_title":"Underwater World,?? ?? ??"},{"location_id":"4","location_reference":"8476039215","location_title":"Fort Santa Agueda,?? ?? Agueda"},{"location_id":"5","location_reference":"5320468719","location_title":"Dulce Nombre de Maria Cathedral,Dulce? Nombre ? ??? ???"},{"location_id":"6","location_reference":"8530697412","location_title":"Leo Palace Resort,?? ??? ???"},{"location_id":"7","location_reference":"5309187462","location_title":"Fort Soledad,?? ?? ??"}]}

Answer 1

尝试将

ng-repeat="location in locations"

更改为

ng-repeat="location in locations.locations"

并将

{{locations.location_id}}

更改为

{{location.location_id}}

Answer 2

要呈现 html 中的每个值，请使用 ng-repeat 指令。

类似这样：

   <body>
    <!--stuff--> 
    <div ng-controller="AllLocations">
        <div ng-repeat="location in locations">
            Location Id: {{ location.location_id }} <br />
            Location Reference: {{ location.location_reference }} <br />
            Location Title: {{ location.location_title }} 
        </div>
    </div>

    <!--end stuff--> 
  </body>