ng-repeat显示空白值

时间:2016-12-05 03:57:40

标签: javascript angularjs json

更新问题并提供解决方案。 我从https://filters.rocks/embed/466.json获得了json feed。

json正在我的范围内进行,但我可以在我的预标签中查看它,但无论出于何种原因,它都不会填充我的ng-repeat。

app.controller('InstagramCtrl', ['$scope', '$http',
function($scope, $http) {
    $scope.items = [];
    $http.get('https://filters.rocks/embed/466.json').then(function(response) {
            $scope.items = response;
            instagramSuccess($scope, $scope.items);

    });

    var instagramSuccess = function(scope, response) {
        if (response.data.length <= 0) {
            $scope.error = response.meta.error_type + ' | ' + response.meta.error_message;
            return;
        }
        if (response.data.length > 0) {
            $scope.items = response.data;

        } else {
            $scope.error = "This hashtag has returned no results";
        }
    };

}
]);

HTML

    <div class="container" ng-controller="InstagramCtrl">

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">

                </div>
                <div class="panel-body">
                    <ul class="instagram-list" ng-repeat="item in items">    
                        <li>
                            <small>{{item.data.feed.id}}</small>
                            <img ng-src="{{item.data.feed.approved_images.medium}}" width="250">
                        </li>

                    </ul>                       
                </div>
                <pre> filter.rocks {{ items | json }} </pre>
            </div>
        </div>           
    </div>

更新 我从每个人那里拿走了点点滴滴,最后得到了这个; 控制器

$scope.items = [];

      $http.get('https://filters.rocks/embed/466.json').then(function(response) {

            instagramSuccess(response);

    });

    var instagramSuccess = function(response) {
        if (!response.data) {
            $scope.error = response.meta.error_type + ' | ' + response.meta.error_message;
            return;
        }
        // check if data is defined if so, check objects are defined, then if array is defined. 
        if (response.data && response.data.feed && response.data.feed.approved_images && response.data.feed.approved_images.length ) {
            //if all good $scope.items becomes array
            $scope.items = response.data.feed.approved_images;

        } else {
            $scope.error = "This hashtag has returned no results";
        }
    };

HTML

                 <ul class="instagram-list" ng-repeat="item in items">    
                        <li class="instagram-item">
                            <small style="color:blue;">{{item.id}}</small>
                            <div bg-img="{{item.medium}}" width="250"></div>
                        </li>
                    </ul>

1 个答案:

答案 0 :(得分:2)

正如madhairsilence指出的那样,当你没有时,你正在把它当作一个数组。您可能希望重复已批准的图像,如下所示:

<ul class="instagram-list" ng-repeat="item in items.feed.approved_images">    
    <li>
        <small>{{item.id}}</small>
        <img ng-src="{{item.medium}}" width="250">
    </li>
</ul>