Question

虽然检索好了但无法显示从服务器检索到的JSON对象数组。看起来HTML的显示是在AngularJS控制器初始化之前完成的。如何显示从服务器检索的数据？这是我的代码：

app.js


    var carApp = angular.module('carsApp', ['ngResource', 'carsApp.services', 'carsApp.controllers']);

carcontroller.js


    angular.module('carsApp.controllers', ['ngResource']);

    carApp.controller('CarController', function($scope, CarService) {
        $scope.items = [
                        {"id":1,"model":"S600","manufacturer":"Mercedes","price":1000.52},
                        {"id":2,"model":"S80","manufacturer":"Volvo","price":500.27}
                       ];
        console.log("Static $scope.items = " + JSON.stringify($scope.items));
        $scope.cars = CarService.getCars();
        console.log("Non-static $scope.cars = " + JSON.stringify($scope.cars));
    });

carservice.js


    angular.module('carsApp.services', ['ngResource']).factory('CarService', function ($http) {
        return {
            getCars: function() {
                    $http({ method: 'GET', url: '/cars/' })
                        .success(function (data, status, headers) {
                            console.log('Data in service');
                            console.log(data);
                        })
                        .error(function (data, status, header) {
                            console.log('error');
                        });
            }
        }
    });

的index.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
    <title>Cars View</title>
    <script type="text/javascript" src="./bower_resources/angular/angular.min.js"></script>
    <script type="text/javascript" src="./bower_resources/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="./bower_resources/angular-resource/angular-resource.min.js"></script>

    <script type="text/javascript" src="./app/app.js"></script>
    <script type="text/javascript" src="./app/controllers/carcontroller.js"></script>
    <script type="text/javascript" src="./app/services/carservice.js"></script>

    <link rel="stylesheet" href="./bower_resources/bootstrap-css-only/css/bootstrap.min.css" />
</head>
<body>
    <div ng-app="carsApp">
        <div ng-controller="CarController">
            <h4>Table content</h4>
            <table>
                <tr>
                    <th ng-repeat="(key, val) in cars[0]">{{key}}</th>
                </tr>
                <tr ng-repeat="car in cars">
                    <td ng-repeat="(key, val) in car">{{val}}</td>
                </tr>
            </table>
            <h4>Cars list content</h4>
            <ul ng-repeat="car in cars">
                <li>{{car.manufacturer}}</li>
            </ul>
            <h4>Items list content</h4>
            <ul ng-repeat="something in items">
                <li>{{something.manufacturer}}</li>
            </ul>
        </div>
    </div>
</body>
</html>

结果：

Answer 1

需要以下列方式修改 carcontroller.js 和 carservice.js ：

<强> carcontroller.js


angular.module('carsApp.controllers', ['ngResource']);

carApp.controller('CarController', function($scope, CarService) {
    CarService.getCars()
            .then(
                function(response) { 
                    $scope.cars = response.data;
                    console.log("$scope.cars inside CarService call = " + JSON.stringify($scope.cars));
                },
                function(error) { 
                    $scope.hasErrors = true;
                }
            );
});

<强> carservice.js


angular.module('carsApp.services', ['ngResource']).factory('CarService', function ($http, $q) {
    return {
        getCars : function(carId) {
            var promise;
            promise = $http({ method : 'GET', url : '/cars/', isArray : true })
                    .success(function (data, status, headers) {
                        console.log('Data in service');
                        console.log(data);
                    })
                    .error(function (data, status, header) {
                        console.log('error');
                    });
            return promise;
        }
    }
});

现在一切正常

Answer 2

Use promise chaining.

请进行此更改。

<强> carservice.js

getCars: function() {

                    var objDefer = $q.defer();
                    $http({ method: 'GET', url: '/cars/' })
                        .success(function (data, status, headers) {
                            objDefer.resolve(data);
                        })
                        .error(function (data, status, header) {
                            console.log('error');
                        });
            }

<强> carcontroller.js

CarService.getCars().then(function(){

    console.log("Non-static $scope.cars = " + JSON.stringify($scope.cars));
},
function(){
 // error
});

AngularJS对象数组未显示但已检索

2 个答案: