不显示来自 Angular 应用程序的 HTML 数据

Question

我正在使用带有 Angular JS 应用程序的 Django REST API。我想在 HTML 表格中打印教室列表。这是我从 REST API 获得的 Json 数据：http://pastebin.com/raw/s0knYX89

这是 HTML

<div ng-app="userListApp">
    <div ng-controller="UsersController">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Classroom</th>
                    <th>School</th>
                    <th>Academic year</th>
                </tr>
          </thead>
          <tbody>
              <tr ng-repeat="classroom in classrooms">
                  <td>{{classroom.classroom}}</td>
                  <td>{{classroom.school.school_name}}</td>
                  <td>{{classroom.academic_year}}</td>
              </tr>
          </tbody>
        </table>
    </div>
</div>

这里是 app.js

var userListApp = angular.module('userListApp', ['ngResource']);

userListApp.factory('Classroom', function($resource) {
      return $resource('/classrooms/?format=json', {}, {
          query: {
              method: 'GET',
              isArray:true,
            }
        });
    });


userListApp.controller('UsersController', function($scope, $resource, Classroom) {
  Classroom.query({},function(data) {
      $scope.classrooms = data;
      console.log(data);
        });
    });

不管怎样，我得到的就是这个

我输入console.log(data); 来检查数据是否到达页面，这就是我得到的结果：控制台中的所有数据，而 HTML 页面中没有 - 即使表格的行是三行，确切地说我应该得到的数字，但它们都是空白的。

有什么想法吗？

Answer 1

尝试在table 上添加ng-show：

<table ng-show = "classrooms != null" class="table table-striped">
            <thead>
                <tr>
                    <th>Classroom</th>
                    <th>School</th>
                    <th>Academic year</th>
                </tr>
          </thead>
          <tbody>
              <tr ng-repeat="classroom in classrooms">
                  <td>{{classroom.classroom}}</td>
                  <td>{{classroom.school.school_name}}</td>
                  <td>{{classroom.academic_year}}</td>
              </tr>
          </tbody>
        </table>

你在哪里call 一个functnio 开始$http 请求？

Answer 2

正如您在console.log 中看到的，返回的数据是一个承诺。尝试正确访问api 响应。