javascript - AngularJS ng-repeat 不循环数组

标签 javascript html angularjs

我正在尝试使用 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 中,我调用一个返回 JSON 的 api,然后将其存储在 $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>

提前致谢!

最佳答案

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

解决此问题的正确方法是使用 $http,但应该有效的错误方法是在成功回调中调用 $scope.$apply()修改 $scope.postData 之后。

关于javascript - AngularJS ng-repeat 不循环数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31592528/

相关文章:

javascript - 如何使用 Netbeans 在服务器端调试 Ajax 请求?

javascript - 在 Object.assign 之后重构数据

javascript - Jquery UI无法从左侧拖动到右侧

javascript - 服务器无法访问时显示离线缓存

css - 如何使用钟形图标自定义 Angular Treeview 节点

javascript - 从基于 WordPress 构建的 ReactJS 应用程序发出 POST 请求

jquery - DOM 元素事件状态问题

javascript - 发送电子邮件时出现 Node.js 404 错误,忽略了我的 res.status

javascript - 使用 Angular JS 指令时出错

javascript - 将 json 数组更新为 data-autocomplete 后,它不会更新 data-autocomplete 的值