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

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

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

控制台中没有JavaScript错误。另外，我不确定是不是异步调用中的

$scope

导致了我的问题，但是如果我将API中的响应复制出来并将其作为字符串（因此是sync而不是async），似乎仍然没有显示任何内容

知道我的臭虫在哪里吗？（免责声明：由于我对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调用：

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';
}]);

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

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

我的HTML:

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';
}]);

前端呈现的HTML是：

“Angular works:8”

我的代码是：

Angular works: {{ 4+4 }}

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

角功：{{4+4}
{{serial.length}}

{{serial}

编辑：

控制台数据日志：

---

这是因为您使用的是jQuery的$.ajax，而Angular没有得到通知。您可以使用$scope.$apply（），但这会有点太草率。而是注入$http服务。这会让你的生活更轻松

---

最好将所有这些逻辑转移到工厂或服务中。这将帮助您更加干爽。

这是因为您使用的是jQuery的$.ajax，而Angular不会得到通知。您可以使用$scope.$apply（），但这会有点太草率。而是注入$http服务。这会让你的生活更轻松

---

最好将所有这些逻辑转移到工厂或服务中。它将帮助您更加干练。

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

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

{{serial.serial}{{serial.game}{{serial.date}

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

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

{{serial.serial}{{serial.game}{{serial.date}

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

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';
}]);

---

更多关于

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

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';
}]);

---

更多关于

这里有两个问题

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

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

{{serial}

第二个问题是您正在使用$.ajax，这是一个jQuery函数，该函数范围内的任何内容都不会自动更新控制器中的$范围。您需要使用$http服务：$http

---

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

这里有两个问题

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

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

{{serial}

第二个问题是您正在使用$.ajax，这是一个jQuery函数，该函数范围内的任何内容都不会自动更新控制器中的$范围。您需要使用$http服务：$http

---

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

您是否在$scope.serials中获得所需数据？如果我说console.log（数据），我将获得正确的数据是。您是否在$scope.serials中获得所需数据？如果我说console.log（数据），我得到了正确的数据是的。我刚刚把我的HTML修改成了你的，我在数据上做了一个console.log，它给出了一个正确的对象。但是，它没有显示出什么。。嗯：）刚刚更新了一张照片：-）谢谢你的帮助！告诉我console.log（$scope.serials）中是否有任何内容？？？如果是，告诉我/告诉我它是怎么来的。如果没有，请在下面一行中使用$scope.$apply（）。啊，对不起，误解了。如果我说console.log（$scope.serials），在我设置它之后-它的值与图中所示的值完全相同；在我的行下面，它是有效的：）我刚刚把我的HTML修改成了你的，我在数据上做了一个console.log，它给出了一个正确的对象。但是，它没有显示出什么。。嗯：）刚刚更新了一张照片：-）谢谢你的帮助！告诉我console.log（$scope.serials）中是否有任何内容？？？如果是，告诉我/告诉我它是怎么来的。如果没有，请在下面一行中使用$scope.$apply（）。啊，对不起，误解了。如果我说console.log（$scope.serials），在我设置它之后-它的值与图中所示的值完全相同；在我的底线之下，它是有效的：）