[英]AngularJS ng-repeat is not looping through array
我正在尝试使用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
进行更改后,它将自动处理视图的更新。 但是由于Angular无法控制jQuery,因此无法检测到更新。
解决此问题的正确方法是使用$http
,但错误的工作方法是在修改$scope.postData
之后立即在成功回调中调用$scope.$apply()
。
尝试将您的Ajax调用切换到Angular自己的$ http函数,如下所示:
$http.get('someURL', {
headers: {
"Accept": "application/json; odata=verbose"
}
}).success(function(data) {
$scope.postData = data.d.results;
console.log($scope.postData);
});
始终建议使用Angular的内置函数,除非在这些函数不够用的情况下需要使用外部库。
1)首先,您需要更新AngularJS的版本
2)您的打印错误不是在post而是在postData
核实:
<div ng-repeat="(key, val) in postData">
{{key}}:{{val}}There has to be something else!!!
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.