AngularJS Question

ng-repeat is not iterating

I have a little problem with ng-repeat.

I have a json file where is the data that I'm trying to display.

I wrote a little service to share the data. It has some methods to set and get the information but, when I try to use that methods in my controller to store the result in a variable (the one that I'm trying to iterate) it is like is were empty but, when I print the variable, print the result.

Here s my approach.


HTML

<ul class="list-unstyled products-list">
<li class="col-sm-6 col-md-3 product" ng-repeat="product in products">
<article>
<img ng-src="{{ product.img }}" class="img-responsive" alt="">
<div class="short-product-detail text-center">
<p class="name">{{ product.name }}</p>
<span class="price">{{ product.price }}</span>
</div>
<a href="javascript:void(0);" class="add-to-cart text-center">add to cart</a>
</article>
</li>
</ul>


controller

angular.module("Store")
.controller("ProductsCtrl", ["$scope", "productsService", function ProductsCtrl($scope, productsService) {
$scope.products = [];
productsService.fetchProducts()
.then(function(response) {
productsService.setProducts(response.data.products);
$scope.products = productsService.getProducts();
console.log($scope.products)
})
}])


service

angular.module("Store")
.service("productsService", ["api", "$http", function (api, $http) {
var productsList = [];
var categories = [];


var getProducts = function() {
return productsList;
};

var setProducts = function(products) {
productsList.push(products);
};

var getCategories = function() {
return categories;
};

var setCategories = function(categories) {
categories.push(categories);
}

var fetchProducts = function() {
return $http({
method: "GET",
url: api.url
});
}

return {
fetchProducts: fetchProducts,
getProducts: getProducts,
setProducts: setProducts,
getCategories: getCategories,
setCategories: setCategories
}
}])


main.js

angular.module("Store", ["ui.router"])
.constant("api", {
url: "data.json"
})
.config(function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
// Set up the states
$stateProvider
.state("products", {
url: "/",
views: {
"": {
templateUrl: "./templates/products.html",
controller: "ProductsCtrl"
}
}
})
})


Please, let me know what I'm doing wrong.

Thanks in advance guys

Answer

Problem is with your config, Change it like this

 $stateProvider
    .state('products', {
    url: '/products',
    templateUrl: './templates/products.html',
    controller: 'ProductsCtrl'
  })
Comments