角度ng重复未加载

时间:2013-10-30 13:20:59

标签: javascript jquery angularjs angularjs-scope angularjs-ng-repeat

我过去曾经使用过这个工作,我已经在localhost上移动了网站,现在我似乎无法让ng-repeat显示结果。有什么想法吗?

应用:

var app = angular.module('Search', ['ngResource']);

function seriesListCtrl ($scope, $http) {

// Set the defaults
$scope.url = '/order/series_list';
$scope.products = [];

// On Success add data to the products array
$scope.loadedItems = function (data, status) {
    $scope.products = data;
    $('.Initialloader').hide();
}

// Fetch the URL where the JSON array is
$scope.fetch = function () {
    $('.Initialloader').show();
    $http.get($scope.url).success($scope.loadedItems);
}

// Instantiate the process
$scope.fetch();

}

/ order / series_list加载正常。但是,数据似乎没有加载到范围内并重复。

HTML:

<div class="order_wrapper" ng-app="Search">
<div ng-controller="seriesListCtrl">

    <div class="well">
        <form class="form-inline">
            <div class="col-lg-5"><input type="text" class="form-control" placeholder="Search Description" ng-model="query.series_description"></div>
            <div class="col-lg-5"><input type="text" class="form-control" placeholder="Search Part Number/SKU" ng-model="query.product_sku"></div>
            <button type="submit" class="btn btn-default"><i class="icon-search"></i> Search</button>
        </form>
    </div>

    <div class="accordion" id="product_list">
        <div class="accordion-group" ng-repeat="prod in products | filter:query">
            <div class="accordion-heading order_listing">
                <div class="row">
                    <div class="col-lg-2 image_container">
                        <img ng-src="{{prod.images_url}}" width="100px">
                    </div>
                    ......... Extra blurb ........
                </div>
            </div>
        </div>
    </div>
</div>

AnjularJS 1.2.0 - 正常加载

angularjs-resource - 正常加载

所以只是为了确认:数据是使用$scope.fetch从/ order / series_list加载的,firebug表示该页面已被提取并且其中包含内容。然后,这应该将数据传递给$scope.loadedItems,然后将其输入$scope.products

在html中,有一个ng-repeat应该循环遍历产品中的所有产品。目前,我的.Initialloader未被隐藏,ng-repeat仍然隐藏。

我真的很感谢你对此的帮助 - 我已经使用了几个小时,似乎无法弄清楚是什么导致了这个问题。

提前致谢。

3 个答案:

答案 0 :(得分:0)

如果您尝试在加载完成之前打印它,products列表可能为空。

我会使用promise factory来处理异步调用。

所以你可以写工厂:

app.factory('Data', ['$http','$q',  function($http, $q) {

  var data  = $http.get("your URL");    

       var factory = {
            query: function (selectedSubject) {
                var deferred = $q.defer();
                 deferred.resolve(data);
                  return deferred.promise;
            }
        }
        return factory;
}]);

来自控制器的电话:

function seriesListCtrl ($scope, Data) {

...

      Data.query()
                    .then(function (result) {
                       $scope.products = data;
                    }, function (result) {
                        alert("Error: No data returned");
                    });

作为旁注

我强烈建议不要在控制器中进行任何DOM操作/更新。你有指令。

答案 1 :(得分:0)

如果从循环中删除过滤器,它是否有效?

在相关说明中,$('.Initialloader').show();可以替换为ngShow

答案 2 :(得分:0)

AHHHH。弄清楚了。我的json有问题!很烦人。非常感谢所有花时间回答的人 - 非常感谢。

相关问题