AngularJS

Question

大家好，我是 angular js 的新手，我编写了以下页面，假设显示来自“http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee”的 table 员工详细信息作为json 对象。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SPRING REST HIBERNATE WEB TEST</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>


<script type="text/javascript">

var app = angular
.module("myModule",[])
.controller("myController", function($scope){

    var EmployeeJSON = null;


    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send();

    xhttp.onreadystatechange = function() {
    if(xhttp.readyState == 4 && xhttp.status == 200) {
        var response = JSON.stringify(xhttp.responseText);
        //alert(JSON.parse(response));
        EmployeeJSON = JSON.parse(response);

        var employees = EmployeeJSON;

        $scope.employees = employees;
        $scope.IsVisible = true;

        alert('employees '+employees);
        alert('$scope.employees '+$scope.employees);
        alert('EmployeeJSON '+EmployeeJSON);

    }
}



});

<body ng-app="myModule">
<h1>SPRING REST HIBERNATE WEB TEST</h1>

<a href="/SpringRestHibernateWebTest/employee/listEmployee">CLICK FOR EMPLOYEE LIST</a>

<form>

<table>
<tr> <td>EMPLOYEE ID</td> <td><input type="text" id="emp_id"></td> </tr>
<tr> <td>EMPLOYEE NAME</td> <td><input type="text" id="emp_name"></td> </tr>
<tr> <td>EMPLOYEE SALARY</td> <td><input type="text" id="emp_salary"></td> </tr>
<tr> <td>EMPLOYEE ADDRESS</td> <td><input type="text" id="emp_address"></td> </tr>
</table>

</form>


<div ng-controller="myController">






<table>

<thead>

<tr> <td>EMPLOYEE ID</td> <td>EMPLOYEE NAME</td> <td>EMPLOYEE SALARY</td><td>EMPLOYEE ADDRESS</td></tr>

</thead>

<tbody>

<tr ng-repeat="employee in employees">

 <td>{{employee.employeeId}}</td>
 <td>{{employee.employeeName}}</td>
 <td>{{employee.employeeSalary}}</td>
 <td>{{employee.employeeAddress}}</td>

</tr>

</tbody>


</table>


</div>

</body>
</html>

根据编码，当页面正在加载时，来自 angular 控制器的警报正在填充并显示 json 对象，但 table 未填充。

如有任何建议，我们将不胜感激！！

Answer 1

您使用住在 Angular 之外的 XMLHttpRequest。

因此您必须使用 $scope.$apply();.

手动触发 Angular 的摘要循环

// ...
$scope.employees = employees;
$scope.IsVisible = true;
$scope.$apply();
// ...

然而，对 API 执行 http 请求的更好方法是使用 $http 服务。

首先，你必须在控制器定义中注入$http服务：

.controller("myController", function($scope, $http) {

然后，你可以有这样的东西：

var endpoint = "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee";

return $http.get(endpoint)
    .then(function(response) {
        // Use data as per your needs
        // response.data
    })
    .catch(function(response) {
        // Error occured
    })
    .finally(function() {
        // Always do something
    });

这样就不用手动调用了$scope.$apply();.

有关 $http 服务的更多信息，您可以在 w3schools, or in Angular documentation 或网络上的许多地方找到。

AngularJS - Table 未从 xmlhttprequest 填充

AngularJS - Table not getting populated from xmlhttprequest

jsp

xmlhttprequest

angularjs-http