angular: ngShow after loading json

Question

The main page of the app did I claim two elements - post and video. But despite pole position of the video is at the bottom of the page is first loaded and only then appears in the main post. I want to load it only when all posts are.

.controller('PostsCtrl', function ($scope, $http, $sce, $ionicLoading) {

    var postsApi = 'http://news.com/wp-json/post filter[posts_per_page]=20&_jsonp=JSON_CALLBACK';

    var _this = this
    $ionicLoading.show({
        template: 'loading...'
    });


    $http.jsonp(postsApi).
            success(function (data, status, headers, config) {
                $scope.posts = data;
                $ionicLoading.hide();
            }).
            error(function (data, status, headers, config) {
                console.log('Post load error.');
            });


    var videoApi = 'http://news.com/wp-json/posts?filter[category_name]=video-of-interest&filter[posts_per_page]=4&_jsonp=JSON_CALLBACK';

// This should go in a service so we can reuse it
    $http.jsonp(videoApi).
            success(function (data, status, headers, config) {
                $scope.video = data;
            });

view:

 <ion-item class="main_post" ng-repeat="post in posts" ng-if="$index == 0" href="#/kikarnews/posts/{{post.ID}}">

            <div class="wrapper">

                <div class="main_img_home" style="background-image: url('{{ post.featured_image.attachment_meta.sizes.medium.url }}'); background-size: cover;" limage-lazy-background-image="true" image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="100"> </div>

                <h3 class="cat_name_main"> {{post.terms.category[0].name}}</h3>

            </div>

            <h2 ng-bind-html="post.title"></h2>




        </ion-item>

        <ion-item ng-repeat="post in posts" ng-if="$index != 0" href="#/kikarnews/posts/{{post.ID}}">

            <div class="row main_home">


                <div class="col col-50 main_img_home">

                    <img class="full-image" image-lazy-src="{{ post.featured_image.attachment_meta.sizes.medium.url }}" image-lazy-loader="android" image-lazy-distance-from-bottom-to-load="-200">
                </div>


                <div class="col col-50 main_title_home">
                    <h5>{{ post.date }}</h5>


                    <h2 ng-bind-html="post.title"></h2>



                </div>

            </div>



        </ion-item>
    </div>



    <!---video-->


    <ion-scroll zooming="true" direction="x">

        <div class="video_home">


            <ion-item ng-repeat="videoi in video" href="#/kikarnews/posts/{{videoi.ID}}">

                    <img class="full-image" image-lazy-src="{{videoi.featured_image.attachment_meta.sizes.medium.url }}">

                <h2 ng-bind-html="videoi.title"></h2>



            </ion-item>
        </div>

        </ion-scroll>

You want to get video part visible only when all posts are loaded ? — Mudasser Ajaz, Aug 23 '15 at 19:56

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

If you want to preload data before app is loaded you can utilize route's controller resolve property - check this answer Delaying AngularJS route change until model loaded to prevent flicker

edited May 23 '17 at 10:26

Community

1
1

answered Aug 23 '15 at 19:36

shershen

9,875
11
39
60

score 0 · Accepted Answer · answered Aug 23 '15 at 22:04

so on you http call you have a success and error call back, you can also add a then call back, simple bind your video variable in the then call back. It will only be called once the call is finished loading all the data. It will look like this

$http.jsonp(postApi).success(function(data,status,headers,config){

}).error(function(data, status, headers, config){

}).then(function(data,status,headers,config){
//bind video url here
$scope.video="urlhere"
})

angular: ngShow after loading json

2 Answers2