Question

我试图以json格式从服务器（servlet）获取数据并添加到表中。数据从服务器端成功获取，当我使用console.log（数据）时，它会打印数据，但不会将其添加到表中。

module.js：

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

module.service('ContactService', function($http) {

    var contacts = [{ }];
    this.getContacts = function($http) {
        var response = $http.get("/PersonalDetail/AngularServlet");
        response.success(function(data, status, header, config) {
            contacts=data;
            console.log("contacts: " + contacts);
            return contacts;
        });
        response.error(function(data, status, header, config) {
            return null
        });
        return contacts;
    }

    this.list = function($http) {
        return  this.getContacts($http);
    }
});

controller.js

module.controller("ContactController", function($scope,$http,ContactService) {
    $scope.contacts=ContactService.list($http);
}

的index.html

<html data-ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<title>JSP Page</title>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js" type="text/javascript"></script>
    <script src="js/module/module.js"  type="text/javascript" ></script>
    <script src="js/controller/controller.js" type="text/javascript" ></script>
</head>
<body>
    <div data-ng-controller="ContactController">           
        <table class="table table-striped table-bordered" bgcolor="orange" border="1">
            <thead>
                <tr>
                    <th>Name   </th>
                    <th>Email  </th>
                    <th>Phone  </th>
                    <th>Action </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contacts">
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.phone}}</td>                       
                </tr>
            </tbody>
        </table>
    </div>
</body>

Answer 1

这是处理Angular中的promise的正确方法。在控制器中：

module.controller("ContactController", function($scope, $http, ContactService) {
    ContactService.list().then(function(data) {
        $scope.contacts = data;
    });
}

然后修改了服务：

module.service('ContactService', function ($http) {

    this.getContacts = function () {
        return $http.get("/PersonalDetail/AngularServlet").then(function (data, status, header, config) {
            return contacts;
        }, function (data, status, header, config) {
            return null;
        });
    }

    this.list = function () {
        return this.getContacts();
    }
});

然后最重要的是你应该从list方法（和getContacts）返回promise对象。

Answer 2

根据我现有的代码，只需更改 var contacts = [{}]; 至 var contacts = [];

或删除

var contacts = [{ }];

其次在$ http.get成功设置联系人：

 response.success(function(data, status, header, config) {
            $scope.contacts=data;
            // console.log("contacts: " + contacts);
            // return contacts;
        });

“dfsq”的上述解决方案也非常好，并且非常适合执行。

Answer 3

您可以尝试以下方法。这是干净且易于管理的方式。您需要具有作为服务工作的AngularJS工厂，该工厂将委托给控制器类，您的联系人将被推送到自己的数组范围。然后你可以简单地在前端循环，然后你得到你的联系。所以这是代码：

<强>服务

var module = angular.module('myApp', []);
module.factory('ContactService', ['$http', function($http) {
    return {
      //You can add as many REST calls inside this return as you want
        getContacts: function(){
          return $http.get("/PersonalDetail/AngularServlet").success(function(data){
            return data;
          })
        }
    };
});

<强>控制器

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

module.controller('ContactController', ['$http', '$scope', 'ContactService', function($http, $scope, ContactService){
  $scope.contacts = [];

    ContactService.getContacts().success(function(data){
      //Depending on data structure in your REST call you might need first to loop the data
      $scope.contacts.push(data);
    })
}]);

<强>的index.html

<div data-ng-controller="ContactController">           
    <table class="table table-striped table-bordered" bgcolor="orange" border="1">
        <thead>
            <tr>
                <th>Name   </th>
                <th>Email  </th>
                <th>Phone  </th>
                <th>Action </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name}}</td>
                <td>{{ contact.email}}</td>
                <td>{{ contact.phone}}</td>                       
            </tr>
        </tbody>
    </table>
</div>

希望这有帮助：）

使用Java后端的angularjs

3 个答案: