Question

我通过调用spring rest webservice从angular js获取用户列表。我在服务中收到回复，但无法在html文件中打印相同内容。控制台上没有错误。

services.js

    fetchUsersDetails:function(){
        var deferred=$q.defer();
        var url="http://localhost:8081/HCP_Android_Demo/fetchUsers";
        return $http.post(url).success(function(response){
            deferred.resolve(response);
        }).error(function(response){
            alert("The error response is"+response);            
        });
        return deferred.promise;
    }

controller.js

function fetchUsers(){
    UserService.fetchUsersDetails().then(function(responseData){
        $scope.userData = responseData.data.usersList;
        $scope.result = responseData.data.Result;
        alert("users list is"+$scope.userData);//prints [Object object]
        alert("result is"+$scope.result);//prints ok
    });
};

Controller.java

 @RequestMapping(value="/fetchUsers",method={RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public String fetchUsers()throws JSONException{
    System.out.println("Inside fetchUsers");
    List<User> userList=userService.fetchUsers();
    ArrayList<JSONObject> arrayList=new ArrayList<JSONObject> ();
    try{
        for(User user:userList){
            JSONObject jsonObject=new JSONObject();
            jsonObject.put("name", user.getUsername());
            jsonObject.put("address", user.getAddress());
            jsonObject.put("email",user.getEmail());
            arrayList.add(jsonObject);
        }
    }
    catch(Exception exception){
        exception.printStackTrace();
    }

    JSONObject usersList=new JSONObject();
    usersList.put("Result", "OK");
    usersList.accumulate("usersList", arrayList);
    /*return callBackFunction +"(" + jsonObject.toString() + ")";   */  
    return  usersList.toString() ;

}

的Login.jsp

  <body ng-app="myApp" ng-controller="UserController as ctrl">
    <div>
    <span class="tableLabel">List Of users</span>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="users in ctrl.userData ">
                <td><span>{{users.username}}</span></td>
                <td><span>{{users.address}}</span></td>
                <td><span>{{usesr.email}}</span></td>
            </tr>
        </tbody>
    </table>
</div>
</body>

JSON

  {"usersList":[{"address":"sssssssss","name":"disha","email":"ssss"},{"address":"xxxx","name":"xxx","email":"xxx"},{"address":"jain.xyz92@gmail.com","name":"disha","email":"xxx"}],"Result":"OK"}

Answer 1

如果您使用Controller as syntax，则必须更改控制器，其中变量可以直接绑定到视图。

<强> JS：

app.controller("UserController", ["$http",
    function( $http) {
             var vm =this;
             $http.get('test.json').then(function (response){
              vm.userData = response.data.usersList ;
        });

}]);

工作Plunker

更改您的视图，如下所示，以便直接访问您的数据，因为您正在使用$ scope variable，

<body ng-app="myApp" ng-controller="UserController">
    <div>
    <span class="tableLabel">List Of users</span>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="users in userData ">
                <td><span>{{users.username}}</span></td>
                <td><span>{{users.address}}</span></td>
                <td><span>{{usesr.email}}</span></td>
            </tr>
        </tbody>
    </table>
</div>
</body>

工作Plunker

Answer 2

您正在使用控制器作为语法，您是否创建了新实例，并且可以直接从控制器实例访问已绑定到控制器的属性。如果要将控制器用作语法，则将函数或对象绑定到控制器，而不是$ scope。你可以这样做

var vm = this.

vm.yourData = resultFromBeckend ;

并在视野中

ng-controller="Ctrl as ctrl"
{{ctrl.yourData}}

在你的情况下改变这一行。从

 $scope.userData = responseData.data.usersList;

要

 vm.userData = responseData.data.usersList;

您的userData不在$scope上的控制器上。将对象绑定到控制器并使用控制器作为语法也是最佳做法。 JhonPapa的角度最佳实践

无法使用angularjs

2 个答案: