Infinite list with ionic?

Question

Infinite list with ionic?

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm trying to create an infinite list with the Ionic / AngularJS. This list passes a offset to my webservice to page the SELECT responses. I can not do this and I'm looking for an example but I have not found it 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

asked by anonymous 03.12.2015 / 03:02

2 answers

How to merge lines? Angular JS ordering in the table does not change

score 2 · Answer 1

Take a look at this example: link . Still about a look at the ionic website: link

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

On the loadMore method you can use your service to return the data. Attention to method:

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

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

score 0 · Answer 2

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>