logo标签列表

AngularJS与Java后端的结合

javajavascriptangularjs
4
我正在尝试以 JSON 格式从服务器（servlet）获取数据并添加到表格中。成功从服务器端获取数据，当我使用 console.log(data) 时，它会打印出数据，但不会将其添加到表格中。
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>

3个回答
2

这里是在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对象。

0
你可以尝试以下方法。这是一种干净且易于管理的方式来实现它。您需要拥有一个作为服务的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>

希望这可以帮到你 :)
0

根据我的观察，在现有的代码中只需要将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" 提供的解决方案也很好，非常适合执行。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接