2016-10-16 5 views
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" 
        } 
       } 
      }) 
    }) 

제발 내가 잘못하고있는 일을 알려주세요. 사전들에서
감사

답변

1

문제는 내가 그것을 변경이

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

처럼 변경, 사용자의 설정에,하지만 문제가 계속 지속됩니다. '$ scope.products'는 내가 기대하고 있지만 HTML을 기대하지 않는 결과를 인쇄 할 때입니다 –

+0

@RicardoaprendizfcOrdoezDelg 팀 뷰어가 있습니까? – Sajeetharan