AngularJS ng-repeat is not looping through array
Question
I am trying to build a loop with ng-repeat but can't iterate over an array of objects. It seems like the loop is not running at all.
I started a jsfiddle - http://jsfiddle.net/a2xhzbfm/1/
Below is an example of data ( $scope.postData ) that I'm working with:
[
{
"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)/"
}
]
In the JS I'm calling an api that returns a JSON and then storing that in $scope.postData variable.
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);
}
});
});
Here is what I have for HTML so far. I'll add more divs once I can get the data to print.
<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>
Thanks in advance!
3 answers
solution1
2 2015-07-23 16:09:22
It's because you're using jQuery for the Ajax. Angular doesn't know that you changed $scope.postData . If you use Angular's own Ajax service, $http , it will automatically handle updating the view after you make changes to $scope . But since Angular doesn't have any control over jQuery, there's no way for it to detect the update.
The right way to fix this is to use $http , but a wrong way that should work is to call $scope.$apply() in your success callback right after you modify $scope.postData .
solution2
1 ACCPTED 2015-07-23 16:14:08
Try switching your Ajax call to Angular's own $http function like so:
$http.get('someURL', {
headers: {
"Accept": "application/json; odata=verbose"
}
}).success(function(data) {
$scope.postData = data.d.results;
console.log($scope.postData);
});
It's always recommended to use Angular's built in functions unless you need to use external libraries for cases where these functions aren't enough.
solution3
0 2015-07-23 16:11:32
1 ) First you need to update version of AngularJS
2 ) You have a misprint not in post but postData
check it:
<div ng-repeat="(key, val) in postData">
{{key}}:{{val}}There has to be something else!!!
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.