【问题标题】:ng-repeat is not iteratingng-repeat 没有迭代
【发布时间】: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


    【解决方案1】:

    问题出在你的配置上,改成这样

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

    【讨论】:

    • 我改了,问题依旧。问题是当我打印 $scope.products 时打印出我期望但不是 HTML 的结果
    • @RicardoaprendizfcOrdoezDelg 你有团队查看器吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-09-25
    • 1970-01-01
    • 2015-12-25
    • 1970-01-01
    • 2012-12-21
    • 2014-10-14
    相关资源
    最近更新 更多