I am new to Angular and was able to create a basic page that create's a list of people with some checkboxes that allow you to choose them.
The problems is that when I change the getAllPeople function to pull from a database
$http.post('angular.cfc?method=returnSerializeQuery').success(function(data) {
$scope.allPeople = data;
});
instead of building the array in the js the html loads to fast and loads with a blank list. if I then search the list shows up. I know that the $http call is too slow to keep up with the document load.
I have to use $timeout but I can't seem to get it to work an the dataset may sometimes take longer than other. If there is a Angular version of $(document).ready() I can't seem to find it.
I am also guessing that since this is my first fully functional page I am have not completely set it up right and that might have something to do with it.
In your post().success callback function, after $scope.allPeople = data; add $scope.groupToPages(), since ng-repeat is watching pagedItems, not allPeople.
If the idea is to delay the page rendering until data is fetched from the server, you have good answers (and examples) here and here.
The main idea:
function Ctrl($scope) {
$scope.data = {};
}
Ctrl.resolve = {
data: function($http) {
return $http({method: 'GET', url: '/path/to/some/data'});
}
};
var myApp = angular.module('app', [], function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/template.html',
controller: Ctrl,
resolve: Ctrl.resolve
});
});
Also check this working example: http://jsfiddle.net/dTJ9N/54/