Angularjs显示ajax响应

时间:2016-08-31 05:28:49

标签: javascript jquery angularjs ajax

基本上我的角度代码看起来像这样

    var myapp = angular.module("Demo",["ngRoute"])
            .config(function($routeProvider){
                $routeProvider                                                      
                    .when("/students",{
                        templateUrl : "templates/students.html",
                        controller : "grouplistcontroller"
                    })
            })              
            .controller("grouplistcontroller", function($scope,$http){                      
                $http.get("ajaxfunction.php?action=getlist")
                    .then(function(res) {   
                        var obj = JSON.stringify(res);
                        console.log(obj);
                        $scope.students = obj.data;
                    });                     
            });

来自服务器的json数据如下所示

"data":[
{
"sub_id":"1199",
"sub_group":"GT"
},
{
"sub_id":"727",
"sub_group":"GT"
},
{
"sub_id":"660",
"sub_group":"GT"
},
{
"sub_id":"614",
"sub_group":"GT"
}
],
"status":200,
"config":{
"method":"GET",
"transformRequest":[
null
],
"transformResponse":[
null
],
"url":"ajaxfunction.php?action=getlist",
"headers":{
"Accept":"application/json, text/plain, */*"
}
},
"statusText":"OK"

我正在尝试从前端的结果中显示循环,这不起作用

<ul>
   <li ng-repeat="student in students">
        {{ student.sub_id }}
   </li>
</ul>

2 个答案:

答案 0 :(得分:4)

嗨,你不必转换JSON.stringify(obj),简单地用作对象...使用下面的控制器

.controller("grouplistcontroller", function($scope,$http){                      
                $http.get("ajaxfunction.php?action=getlist")
                    .then(function(res) {   


                        $scope.students = res.data;
                    });                     
            });

答案 1 :(得分:-2)

我认为控制器没有从服务器获取数据。 控制器并非用于此目的。你应该使用服务,看看这个代码。我希望这对你有用。

<body ng-app="Demo">
  <div ng-controller="grouplistcontroller">
    <ul>
      <li ng-repeat="student in students">
        {{ student.sub_id }}
      </li>
    </ul>
  </div>
</body>

JS:

模块:

   var myapp = angular.module("Demo", ["ngRoute"])
     .config(function($routeProvider) {
       $routeProvider
         .when("/students", {
           templateUrl: "templates/students.html",
           controller: "grouplistcontroller"
         })
     });

控制器:

myapp.controller("grouplistcontroller", ['$scope', 'SampleService', function($scope, SampleService) {
   function suuccessMethod(res) {

     $scope.students = res.data;
   }

   function errorMethod(err) {

   }


   SampleService.get().then(suuccessMethod, errorMethod);
 }]);

服务:

   myapp.factory('SampleService', function($http) {
     return {

       get: function() {
         return $http.get("ajaxfunction.php?action=getlist");
       }

     }

   });

提出您的问题:此功能的问题:

function suuccessMethod(res) {

     $scope.students = res.data;
   }

如上所述,我希望它能起作用