Question

我正在调用我的后端，后端返回一个对象列表作为JSON。现在，我想在Angular应用程序的前端迭代这些。

但是，当我在下面写的HTML时，没有显示任何内容。我不知道为什么，因为我确信这是语法。

控制台中没有JavaScript错误。另外，我不确定是否是导致我的问题的异步调用中的$scope，但似乎如果我将API中的响应复制出来并将其作为字符串（因此同步而不是异步），什么都没有显示出来。

知道我的bug在哪里？（免责声明：因为我是Angular的新手，我可能会犯一个新手的错误！）

我的角色应用

var app = angular.module("app", ['ngRoute'])

app.config(function($routeProvider) {   
    $routeProvider.when('/front', { 
        templateUrl: '/templates/front.html',
        controller: 'FrontController'
    });

    $routeProvider.otherwise({redirectTo: '/front'})

});

app.controller('FrontController',['$scope',function($scope) {

    $.ajax({
        type: 'GET',
        url: '/api/serials',
        dataType: 'json',
        success: function(data){
            $scope.serials = data;
        },
        error: function(err) {
            alert('fejl');
        }
    });

    $scope.datatitle = 'hheeh';
}]);

AJAX致电：

在我的网络类别中，我可以看到API返回以下内容：

[{"_id":"53cf8b80a20055c6eebf80b1","serial":"1231323123","game":"World of Warcraft","date":"2013-12-31T23:00:00.000Z"}]

我的HTML：

前端呈现的HTML是："Angular works: 8"

我的代码是：

Angular works: {{ 4+4 }}

{{serial.length}}
<ul>
    <li data-ng-repeat="serial in serials">{{serial}}</li>
</ul>

修改：

数据控制台日志：

enter image description here

Answer 1

您可以创建工厂并将其注入控制器中。以下是如何创建工厂并在您的案例中使用它：

app.factory('SerialService', function($http) {
    return {
        getSerials: function(callback) {
            return $http({
                method: 'GET',
                url: "/api/serials"
            }).
            success(function(data) {
                callback(data);
            });
    };

});

并在您的控制器中：

app.controller('FrontController',['$scope','SerialService',function($scope,SerialService) {

    SerialService.getSerials(function(data){
       $scope.serials = data;
    });

    $scope.datatitle = 'hheeh';
}]);

更多关于Angular Service

Answer 2

这是因为你使用的是jQuery的$ .ajax，并且没有通知Angular。你可以使用$ scope。$ apply（）但这样会很苛刻。而是注入$ http服务。它会让你的生活更轻松。

更好的是将所有逻辑移到工厂或服务中。它会帮助你更干。

Answer 3

假设你在$ scope.serials中得到了合适的json对象（如图所示）......你应该写如下。

<ul>
    <li data-ng-repeat="serial in serials">{{serial.serial}}{{serial.game}}{{serial.date}}</li>
</ul>

Answer 4

这里有两个问题。

下面的HTML将打印出完整字符串的JSON表示。要获得实际的属性值，您必须执行serial.xxxx。

<li data-ng-repeat="serial in serials">{{serial}}</li>

第二个问题是你使用$ .ajax，这是一个jQuery函数，该函数范围内的任何内容都不会自动更新控制器中的$ scope。您需要使用$ http服务：https://docs.angularjs.org/api/ng/service/ $ http

确保正确包含该服务。如果您使用$ http服务，则不必手动执行$ scope。$ apply（），您将删除另一个jQuery依赖项。

从角度控制器设置范围中迭代列表

4 个答案: