【发布时间】:2017-02-25 13:54:13
【问题描述】:
我对 ng-repeat 有一点问题。
我有一个 json 文件,我要显示的数据在哪里。
我写了一个小服务来共享数据。它有一些方法来设置和获取信息,但是,当我尝试在我的控制器中使用这些方法将结果存储在一个变量中(我试图迭代的那个)时,它就像是空的但是,当我打印变量,打印结果。
这是我的方法。
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>
控制器
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)
})
}])
服务
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"
}
}
})
})
请让我知道我做错了什么。
先谢谢各位了
【问题讨论】:
标签: angularjs angularjs-ng-repeat ng-repeat