0
ng-repeat에는 약간의 문제가 있습니다.
표시하려는 데이터가 json 파일에 있습니다.
데이터를 공유하는 작은 서비스를 작성했습니다. 그것은 정보를 설정하고 가져 오는 몇 가지 메소드를 가지고 있지만, 컨트롤러에서 그 메소드를 사용하여 변수에 결과를 저장하려고하면 (즉, 반복하려고하는) 결과가 비어있는 것처럼 보이지만, 변수를 인쇄하고 결과를 인쇄하십시오.
내 접근 방식은 다음과 같습니다.
ng-repeat는 반복하지 않습니다.
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"
}
}
})
})
제발 내가 잘못하고있는 일을 알려주세요. 사전들에서
감사
처럼 변경, 사용자의 설정에,하지만 문제가 계속 지속됩니다. '$ scope.products'는 내가 기대하고 있지만 HTML을 기대하지 않는 결과를 인쇄 할 때입니다 –
@RicardoaprendizfcOrdoezDelg 팀 뷰어가 있습니까? – Sajeetharan