2014-10-16 6 views
2

Я только начал использовать ионный каркас (блестящий), и я новичок в угловой. У меня работает веб-сервис, и приложение должно загружать данные. Я сумел получить данные, говоря, WordPress апите остальное отправляют данные в виде страниц, и я не знаю, как добиться того, что с бесконечной прокруткой на закладках, вот мой HTML разметка:ионный каркас бесконечный свиток с http получить данные

<ion-view title="All Wallpapers"> 
    <ion-content ng-controller="MyCtrl"> 
    <div class="row" > 
    <div ng-controller="PostsController" > 
     <div ng-repeat="post in posts"> 
      <div class="col col-50"> 
        <div class="list card"> 
          <div class="item item-image"> 
          <img ng-src="{{post.thumbnail}}"></> 
          </div> 
          <a class="item item-icon-left assertive" href="#"> 
          <i class="icon ion-android-image"></i> 
          {{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}} 
          </a> 
        </div> 
      </div> 
    </div> 
    </div> 
    </div> 
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> 
</ion-content> 
</ion-view> 

и в моих apps.js я есть:

wallweight.controller('PostsController', function($scope, $http) { 
    $scope.page = 1; 

    var url='http://wallweight.com/api/get_recent_posts?page'; 
    $http.get(url). 
    success(function(data, status, headers, config) { 

     $scope.posts = data.posts; 
     console.log(data); 
    } 
). 


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

    }); 


}); 
function MyCtrl($scope, $http) { 
    $scope.posts = []; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page=2').success(function(items) { 
     $scope.posts.push($scope.posts.items); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }); 
    }; 

    $scope.$on('$stateChangeSuccess', function() { 
    $scope.loadMore(); 
    }); 
} 

Вторая функция не загружает данные, но не добавляет его к исходным данным. Спасибо за ваше время.

PS, я имею вид на многие codepen примеры, однако, я не могу показаться, чтобы заставить их работать ..

EDIT:

Хорошо, ив удалось сократить вниз problem.I был злоупотребляя контроллеры теперь я получить данные, но новые данные заменяют старые данные,

function MyController($scope, $http) { 
    $scope.posts = []; 
    $scope.page=1; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) { 
     $scope.posts=items.posts; 
     console.log(items.posts); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     console.log($scope.page); 
     $scope.page +=1; 
    }); 
    }; 

я понимаю $ scope.posts = items.posts не так, я просто не могу найти способ, чтобы добавить его

+0

Хорошо, ив удалось сузить проблему. теперь я получаю данные, но новые данные заменяют старые данные, function MyController ($ scope, $ http) { $ scope.posts = []; $ scope.page = 1; $ scope.loadMore = function() { $ http.get ('http://wallweight.com/api/get_recent_posts?page='+$scope.page) .success (function (items) { $ scope. сообщений = items.posts; \t console.log (items.posts);. $ $ Объем вещания ('scroll.infiniteScrollComplete'); \t console.log ($ scope.page); \t $ scope.page + = 1; }); }; Я понимаю $ scope.posts = items.posts неправильно, я просто не могу найти способ добавить его –

ответ

5

Понял работает :)

function MyController($scope, $http) { 
    $scope.posts = []; 
    $scope.page=1; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) { 
    var i = items.posts.length; 
    $scope.posts = $scope.posts.concat(items.posts); 
    $scope.posts.push(items); 
     console.log(items.posts[0]); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     console.log($scope.page); 
     $scope.page +=1; 
    }); 
    }; 
-1

Спасибо это спасло меня часы.

Я изменил мой, чтобы работать с $resource для моего завода, но это по сути то же самое ...

$scope.loadMore = function() { 
    moreNewsletters = WPFactory.query({ 
     'page' : $scope.pageNum, 
    'filter[posts_per_page]': 10, 
    param1: 'posts', 
    'filter[cat]': 8, 
    'filter[orderby]': 'ID', 
    }, function(data,responseHeaders) { 

     angular.forEach(moreNewsletters, function(value, key) { 
     value.image1 = ThumbnailFactory.getThumbnail(value.content); 
    }); 

var i = data.length; 
$scope.newsletters = $scope.newsletters.concat(data); 
$scope.newsletters.push(data); 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
    $scope.pageNum +=1; 
    });  
}; 

Хотя я получаю дополнительный пустой элемент в нижней части 10 пунктов.

0

комментарий этой строки //$scope.newsletters.push(data); он добавляет как другой элемент целые данные.

2

Попробуйте

$scope.posts = $scope.posts.concat(items.posts); 

вместо

$scope.posts=items.posts; 
Смежные вопросы