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

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

Answer 2

尝试在ng-show上添加table：

<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启动$http请求的功能？

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

2 个答案: