Question

我正在尝试使用ng-repeat构建一个循环但不能迭代一个对象数组。好像循环根本没有运行。

我开始了一个jsfiddle - http://jsfiddle.net/a2xhzbfm/1/

以下是我正在使用的数据（$scope.postData）的示例：

[
    {
        "Title" : "Test1",
        "Content" : "<div class=\"ExternalClass53DA82296DEE49898B93B8E59F9074BD\"><p>This is a test post.</p></div>",
        "ImagePath" : "url",
        "Text" : "Apple",
        "Link" : "http://www.apple.com/",
        "Created" : "/Date(1436889599000)/"
    }, {
        "Title" : "Test2",
        "Content" : "<div class=\"ExternalClass53DA82296DEE49898B93B8E59F9074BD\"><p>This is a test post.</p></div>",
        "ImagePath" : "url2",
        "Text" : "Apple2",
        "Link" : "http://www.apple.com/",
        "Created" : "/Date(1436889599000)/"
    }
]

在JS中我正在调用一个api，它返回一个JSON，然后将其存储在$scope.postData变量中。

var app = angular.module('blogApp',[]);
app.controller('blogController', function($scope){
    console.log('Angular is go!');
    $scope.postData;

    $.ajax({
        url: 'someURL',
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            $scope.postData = data.d.results;
            console.log($scope.postData);


        },
        error: function (data) {
            console.log(data.responseJSON.error);
        }
    });
});

到目前为止，这是我对HTML的看法。一旦我可以打印数据，我将添加更多div。

<body ng-app="blogApp">
    <div ng-controller="blogController" class="container">
        <div class="row">
            <div ng-repeat="post in postData">
                <div ng-repeat="(key, val) in post">
                    {{key}}:{{val}}There has to be something else!!!
                </div>
            </div>
        </div>
    </div>
</body>

提前致谢！

Answer 1

这是因为你正在为Ajax使用jQuery。 Angular不知道您更改了$scope.postData。如果您使用Angular自己的Ajax服务$http，它将在您对$scope进行更改后自动处理更新视图。但由于Angular对jQuery没有任何控制权，因此无法检测到更新。

解决此问题的正确方法是使用$http，但错误的方法是在修改$scope.$apply()后立即在成功回调中调用$scope.postData。

Answer 2

尝试将您的Ajax调用切换到Angular自己的$http function，如下所示：

$http.get('someURL', {
    headers: {
        "Accept": "application/json; odata=verbose"
    }
}).success(function(data) {
    $scope.postData = data.d.results;
    console.log($scope.postData);
});

除非您需要在这些功能不够的情况下使用外部库，否则始终建议使用Angular的内置函数。

Answer 3

1）首先，您需要更新AngularJS的版本

2）您的错误打印不是在帖子中，而是 postData

检查它：

 <div ng-repeat="(key, val) in postData">
    {{key}}:{{val}}There has to be something else!!!
 </div>

http://jsfiddle.net/STEVER/a2xhzbfm/3/

AngularJS ng-repeat不是循环遍历数组

3 个答案: