Question

我是AngularJS的新手，目前正在使用angularjs.学习PHP RESTful服务。我有一个问题，为什么我的响应数据没有显示在ng-repeat中？

这是代码结构：

<html ng-app="ngTest">
    <head>

    <title>Angular Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.0.7/angular-resource.js"></script>
    </head>
    <body>
        <div ng-controller="GetCtrl">
        <ul>
            <li ng-repeat="user in users">{{ user.email }}</li>
        </ul>
    </div>
        <script type="text/javascript">
        var ngTest = angular.module('ngTest',[]);

        ngTest.factory('GetFactory',function($http){
                var users = [];
                var factory = {};

                factory.getUsers = function(){
                    $http.get('api/get.php');
                    return users;
                };
                return factory;
            });



        ngTest.controller('GetCtrl',function($scope,GetFactory){
                    $scope.users = GetFactory.getUsers();

        });


        </script>

    </body>
    </html>

PHP代码包含虚拟基本json响应数据：

<?php 
$dummyData = array(
    'email'=>'malikperang@gmail.com',
    'password'=>'admin321',
    );
$jsonen = json_encode($dummyData);
print_r($jsonen);

?>

这里有什么问题？

更新：请滚动到@Koddi回答。感谢。

Answer 1

没有定义$data变量。

应该是

$jsonen = json_encode($dummyData);

而不是

$jsonen = json_encode($data);

Answer 2

这是我编辑的答案。请查看内联评论以获取解释。

<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.0.7/angular-resource.js"></script>
</head>
<body>
    <div ng-controller="GetCtrl">
    <ul>
        <li ng-repeat="user in users">{{ user.email }}</li>
    </ul>
</div>
    <script type="text/javascript">
        var ngTest = angular.module('ngTest',[]);

        ngTest.factory('GetFactory',function($http)
        {
                var users = [];
                var factory = {};

                factory.getUsers = function(){
                    // the problem was here.
                    // as @Michael Butler pointed out.    
                    // Next, Best practices is to return the $http.get
                    // so you can play with promises callbacks 
                    // in the caller controller (as GetCtrl).
                    // promise callbacks : success() & .error
                    var userGetRequest = $http.get('api/get.php');
                    return userGetRequest;
                };
                return factory;
        });

        ngTest.controller('GetCtrl',function($scope,GetFactory)
        {
                    $scope.users = [];

                    GetFactory.getUsers()
                    .success(function(response)
                    {
                        // the api request was OK.
                        // we push because get by default return an object
                        // and here users is an array.
                        $scope.users.push(response);
                        console.log(response); // check navigator console for the server response
                    })
                    .error(function(response)
                    {
                        // something went wrong with the api request
                        console.log(response); // check navigator console for the server response
                    });
        });
    </script>
</body>
</html>

您可能会注意到工厂内的var用户现在没用，因为我们会直接返回呼叫结果的承诺。但是如果你想用get结果来提供它，请在工厂内创建一个getSuccess函数，如下所示：

var getSuccess = function(response) 
{
  // we push because get by default return an object
  // and here users is an array.
  users.push(response);    
}

在factory.getUsers：

里面

var userGetRequest = $http.get('api/get.php');
userGetRequest.success(getSuccess);
return userGetRequest;

希望有所帮助。

Answer 3

请勿使用print_r，而是使用print打印出数据。 print_r添加了额外的格式，不会成为有效的JSON。

<强>更新

这部分看起来不正确：

$http.get('api/get.php');
return users;

我还不太熟悉AngularJS，但是你不需要为users变量分配一些东西吗？看起来你只是调用get.php AJAX请求而不将结果存储在任何地方。

Ng-repeat不显示数据

3 个答案: