Question

我在stucontrollers.j

中有这段代码

/// <reference path="../angular.js" />
var stucontrollers = angular.module("stucontrollers", []);
stucontrollers.controller("GetStudentsList",
    function GetStudentsList($scope, $http) {
    $http({
        method: 'GET',
        url: '/api/students'
    }).then(function(data) {
        $scope.students = data;
    });
});

在我的view中，我有这个

<div ng-app="StudentApp">
    <div ng-controller="GetStudentsList">
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>FistName</th>
                    <th>LastName</th>
                    <th>Age</th>
                    <th>Gender  </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in students">
                    <td>{{item.Id}}</td>
                    <td>{{item.FirstName}}</td>
                    <td>{{item.LastName}}</td>
                    <td>{{item.Age}}</td>
                    <td>{{item.Gender}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

在我的app.js这就是我所拥有的

/// <reference path="../angular.js" />
var module = angular.module("StudentApp", ["stucontrollers"]);

这是我的StudentsController.cs

// GET: api/Students
        public IQueryable<Student> GetStudents()
        {
            return db.Students;
        }

我正在尝试将学生列表放入我的视图中，但我只能在页面检查器的响应中获取它而不是页面本身。我究竟做错了什么。谢谢。

修改现在我能够在控制台中看到我的数据。但我仍然无法在我的页面中看到它。以下是我在控制台中获得的数据。

data
:
Array(2)
0
:
{Id: 1, FirstName: "Juan", LastName: "Dela Cruz", Age: 25, Gender: "Male"}
1
:
{Id: 2, FirstName: "Maria ", LastName: "Makiling", Age: 30, Gender: "Female"}

Answer 1

尝试在设置值后调用$scope.$apply()。

    $http({
      method: 'GET',
      url: '/api/students'
    }).then(function(data) {
      $scope.students = data;
      $scope.$apply();
    });

或只是

    $http({
      method: 'GET',
      url: '/api/students'
    }).then(function(data) {
      $scope.$apply(function() {
        $scope.students = data;
      });
    });

来自$apply documentation

$ apply（）用于从AngularJS框架外部执行AngularJS中的表达式。

Answer 2

试试这个：

    /// <reference path="../angular.js" />
    var stucontrollers = angular.module("stucontrollers", []);
    stucontrollers.controller("GetStudentsList",
    function GetStudentsList($scope, $http) {
    $http({
        method: 'GET',
        url: '/api/students'
    }).then(function(response) {
        $scope.students = response.data;
    });
});

Answer 3

要进行调试，请尝试直接设置$ scope.students的值，如下所示：

/// <reference path="../angular.js" />
var stucontrollers = angular.module("stucontrollers", []);
stucontrollers.controller("GetStudentsList",
    function GetStudentsList($scope, $http) {
    $scope.students = [{Id: 1, FirstName: "John"}];
});

然后发生以下两种情况之一：

a）您在列表中看到John：这意味着ng-controller和ng-repeat工作。获取数据时出现问题。请通过console.logging您的回复来尝试下一步。

b）你没有在列表中看到John：甚至在请求发生之前就出现了问题。

Answer 4

这对我有用，你不妨试试看：

/// <reference path="../angular.js" />
var stucontrollers = angular.module("stucontrollers", []);
stucontrollers.controller("GetStudentsList",
    function GetStudentsList($scope, $http,$rootScope) {
    $http({
        method: 'GET',
        url: '/api/students'
    }).then(function(data) {
    $rootScope.$apply(function(){
        $scope.students = data;
    });
  });
});

来自Angular .then函数的数据不会显示在页面上

4 个答案: