AngularJS, Async-ng-repeat doesn't wait for scope to be set
When I load my index page, my ajax call works and the scope is set. But it looks like the ng-repeat is loaded before the scope is set using "products".
I feel like there must be a way either
- Load the page without waiting for the region to be set, but when it is set, repeat the "ng-repeat" loop
- Wait for the AJAX call to complete before initializing the loop ('ng-repeat')
Hooray!
products.controller.js
dvpModule.controller("ProductsController", function ($scope, productRepository) {
productRepository.get().then(function(products) {
$scope.products = products;
});
});
products-repository.js
dvpModule.factory('productRepository', function($http, $q) {
return {
get: function() {
var deferred = $q.defer();
$http({
method: 'POST',
url: 'http://localhost/test/wp-admin/admin-ajax.php',
params: { action: 'getAllProductUrls' },
}).success(deferred.resolve).error(deferred.reject);
return deferred.promise;
}
};
});
index.html
<html ng-app="dvpModule">
<head>
<script type='text/javascript' src='js/angular.min.js'></script>
<script src="js/scripts/dvp_module.js" /></script>
<script src="js/scripts/products-controller.js" /></script>
<script src="js/scripts/products-repository.js" /></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title>DVP {{2 + 2}}</title>
</head>
<body ng-controller="ProductsController">
<div>
<tr ng-repeat="product in products">
<th>{{product.Category}}</th>
<th>{{product.Features}}</th>
<th>{{product.MODEL_SERIES}}</th>
</tr>
</div>
+3
Brady liles
source
to share
No one has answered this question yet
Check out similar questions:
4523
3952
3178
1850
1690
1195
1073
998
969
912