0

Estou tentando criar uma lista infinita com o Ionic/AngularJS. Essa lista passa um offset para meu webservice paginar as respostas do SELECT. Não estou conseguindo fazer isso e estou procurando um exemplo mas ainda não encontrei.

Estou tentando assim.

Service

var app = angular.module('starter');

app.service('EmpresaAPIService', function($http, AppConstants, HeaderFactory){
    var headersJSON = HeaderFactory.getHeader.headerJSON();

    this.getAllEmpresas = function(offset){
        var _url = AppConstants.webServiceUrl + "/empresas/getAllEmpresas.json";
        var _jsonData = {"offset": offset};

        return $http.post(_url, _jsonData, {
            headers: headersJSON,
        }); 

    };

});

Controller

var app = angular.module('starter');

app.controller('EmpresaCtrl', function($scope, EmpresaAPIService){

    var offset = 0;
    $scope.items = [];

    $scope.addItems = function(){
        EmpresaAPIService.getAllEmpresas(offset)
        .success(function(data){
            var result = data.result;           
            for(var x = 0; x < result.length; x++){
                $scope.items.push(result[x].Empresa);
            }
            offset += 5;

            //console.log(result[0].Empresa.nomeFantasia);  
        })
        .error(function(err){
            console.log(err);
        });

    };

});

Html

<ion-view title="Empresas">
  <ion-content class="has-header padding">
    <ion-list>
        <ion-item ng-repeat="item in items track by $index">
          <p>{{item.nomeFantasia}}</p>
        </ion-item>
        <ion-infinite-scroll on-infinite="addItems()" distance="1%"></ion-infinite-scroll>
   </ion-list>
  </ion-content>
</ion-view>
1

2 Respostas 2

2

Da uma olhada nesse exemplo: http://codepen.io/d4dilip/pen/rkxyA. Ainda sobre de uma olhada no site do ionic: http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

Código exemplo:

HTML:

<html ng-app="ionicInfiniteScrollApp">
<head lang="en">
    <meta charset="UTF-8">
    <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
    <script src="app.js"></script>
    <title>Infinite App Example </title>
</head>
<body ng-controller="InfiniteAppCntrl">
    <ion-content>
        <ion-header-bar >{{items.length}} items</ion-header-bar>
    </ion-content>
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat="item in items"  item="item" href="#{{item.id}}">
                Item {{item.id}}
            </ion-item>
            <ion-infinite-scroll distance="2"
            on-infinite="loadMoreData()"
            ng-if="!moredata"
            ></ion-infinite-scroll>
        </ion-list>
    </ion-content>
</body>
</html>

JS:

/**
* Created by singhdi on 2014-07-26.
*/
var app = angular.module("ionicInfiniteScrollApp",['ionic']);

app.controller("InfiniteAppCntrl",function($scope){
    $scope.moredata = false;
    debugger;
    $scope.loadMoreData=function()
    {
        $scope.items.push({id: $scope.items.length});
        if($scope.items.length==100)
        {
            $scope.moredata=true;
        }
        $scope.$broadcast('scroll.infiniteScrollComplete');
    };

    $scope.items=[];
});

No método loadMore voc6e pode usar o teu serviço para retornar os dados. Atenção ao método:

$scope.$broadcast('scroll.infiniteScrollComplete');

Esse deve ser chamado após você atualizar a váriavel com o conteúdo retornado do serviço. Em resumo esse cara irá disparar um comando pro controller do scroll ser atualizado.

0

Resolvido.

Controller

var app = angular.module('starter');

app.controller('EmpresaCtrl', function($scope, EmpresaAPIService){

    var offset = 0;
    $scope.items = [];

    $scope.addItems = function(){
        if($scope.items.length > 0){
            offset++;
        }
        EmpresaAPIService.getAllEmpresas(offset)
        .success(function(data){
            angular.forEach(data.result, function(empresa){
                $scope.items.push(empresa);
            })

            $scope.$broadcast('scroll.infiniteScrollComplete');
        });

    };
});

html

<ion-view title="Empresas">
  <ion-content class="has-header padding">
    <ion-list>
        <ion-item ng-repeat="item in items">
          <p>{{item.Empresa.nomeFantasia}}</p>
        </ion-item>
        <ion-infinite-scroll on-infinite="addItems()" distance="1%"></ion-infinite-scroll>
   </ion-list>
  </ion-content>
</ion-view>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .