Infinite list with Ionic?

Asked

Viewed 346 times

0

I am trying to create an infinite list with Ionic/Angularjs. This list passes a offset for my webservice page the answers from SELECT. I’m not able to do this and I’m looking for an example but I haven’t found one yet.

I’m trying like this.

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>
angularjs ionic

2 answers

2

Take a look at this example: http://codepen.io/d4dilip/pen/rkxyA. Still about a look at the Ionic website: http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

Sample code:

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=[];
});

In the method loadMore Voc6e can use your service to return the data. Attention to the method:

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

This should be called after you update the variable with the content returned from the service. In short this guy will trigger a command for the scroll controller to be updated.

0

Solved.

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>

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.