App won't display all items (Ionic, Backand)

Question

I want to make an app which displays some items, so I found the backand template (https://market.ionic.io/starters/backand-simple) and used it. I have about 40 items in my database, but the app only displays the first 20 items.

my controller.js

angular.module('SimpleRESTIonic.controllers', [])

.controller('LoginCtrl', function (Backand, $state, $rootScope, LoginService) {
    var login = this;

    function signin() {
        LoginService.signin(login.email, login.password)
            .then(function () {
                onLogin();
            }, function (error) {
                console.log(error)
            })
    }

    function onLogin(){
        $rootScope.$broadcast('authorized');
        login.email = '';
        login.password = '';            
        $state.go('tab.dashboard');
    }

    function signout() {
        LoginService.signout()
            .then(function () {
                //$state.go('tab.login');
                login.email = '';
                login.password = '';
                $rootScope.$broadcast('logout');
                $state.go($state.current, {}, {reload: true});
            })

    }

    login.signin = signin;
    login.signout = signout;
})

.controller('DashboardCtrl', function (ItemsModel, $rootScope) {
    var vm = this;

    function goToBackand() {
        window.location = 'http://docs.backand.com';
    }

    function getAll() {
        ItemsModel.all()
            .then(function (result) {
                vm.data = result.data.data;
            });
    }

    function clearData(){
        vm.data = null;
    }

    function create(object) {
        ItemsModel.create(object)
            .then(function (result) {
                cancelCreate();
                getAll();
            });
    }

    function update(object) {
        ItemsModel.update(object.id, object)
            .then(function (result) {
                cancelEditing();
                getAll();
            });
    }

    function deleteObject(id) {
        ItemsModel.delete(id)
            .then(function (result) {
                cancelEditing();
                getAll();
            });
    }

    function initCreateForm() {
        vm.newObject = {name: '', description: ''};
    }

    function setEdited(object) {
        vm.edited = angular.copy(object);
        vm.isEditing = true;
    }

    function isCurrent(id) {
        return vm.edited !== null && vm.edited.id === id;
    }

    function cancelEditing() {
        vm.edited = null;
        vm.isEditing = false;
    }

    function cancelCreate() {
        initCreateForm();
        vm.isCreating = false;
    }

    vm.objects = [];
    vm.edited = null;
    vm.isEditing = false;
    vm.isCreating = false;
    vm.getAll = getAll;
    vm.create = create;
    vm.update = update;
    vm.delete = deleteObject;
    vm.setEdited = setEdited;
    vm.isCurrent = isCurrent;
    vm.cancelEditing = cancelEditing;
    vm.cancelCreate = cancelCreate;
    vm.goToBackand = goToBackand;
    vm.isAuthorized = false;

    $rootScope.$on('authorized', function () {
        vm.isAuthorized = true;
        getAll();
    });

    $rootScope.$on('logout', function () {
        clearData();
    });

    if(!vm.isAuthorized){
        $rootScope.$broadcast('logout');
    }

    initCreateForm();
    getAll();

});

my services.js

angular.module('SimpleRESTIonic.services', [])

.service('APIInterceptor', function ($rootScope, $q) {
    var service = this;

    service.responseError = function (response) {
        if (response.status === 401) {
            $rootScope.$broadcast('unauthorized');
        }
        return $q.reject(response);
    };
})

.service('ItemsModel', function ($http, Backand) {
    var service = this,
        baseUrl = '/1/objects/',
        objectName = 'items/';

    function getUrl() {
        return Backand.getApiUrl() + baseUrl + objectName;
    }

    function getUrlForId(id) {
        return getUrl() + id;
    }

    service.all = function () {
        return $http.get(getUrl());
    };

    service.fetch = function (id) {
        return $http.get(getUrlForId(id));
    };

    service.create = function (object) {
        return $http.post(getUrl(), object);
    };

    service.update = function (id, object) {
        return $http.put(getUrlForId(id), object);
    };

    service.delete = function (id) {
        return $http.delete(getUrlForId(id));
    };
})

.service('LoginService', function (Backand) {
    var service = this;

    service.signin = function (email, password, appName) {
        //call Backand for sign in
        return Backand.signin(email, password);
    };

    service.anonymousLogin= function(){
        // don't have to do anything here,
        // because we set app token att app.js
    }

    service.signout = function () {
        return Backand.signout();
    };
});

my dashboard-tab //which displays the items

<ion-view view-title="Produkte">
<div ng-if="!vm.isCreating && !vm.isEditing">
    <ion-content class="padding has-header">
        <!-- LIST -->
        <div class="bar bar-header bar-balanced">
            <span ng-click="vm.isCreating = true"><i class='icon ion-plus-round new-item'> Erstellen</i></span>
        </div>
            <div class="bar bar-subheader">
                <div class="list card" ng-repeat="object in vm.data"
                     ng-class="{'active':vm.isCurrent(object.id)}">
                        <div class="item item-icon-right item-icon-left">
                            <i class="ion-compose icon" ng-click="vm.setEdited(object)"></i>

                            <h2 class="text-center"><b>{{object.name}}</b></h2>
                            <i class="icon ion-close-round" ng-click="vm.delete(object.id)"></i>
                        </div>
                            <div class="text-center">
                                {{object.description}}
                            </div>
                            <div class="item item-body">
                                <p style="text-align:center;"><img src="{{object.imgurl}}" style="max-width: 250px; max-height: 250px" /></p>
                            </div>
                            <div class="text-center">
                                {{object.price}} Euro
                            </div> 
                </div>
            </div>
    </ion-content>
</div>
<div ng-if="vm.isCreating">
    <ion-content class="padding has-header">
        <!-- Erstellen -->
        <div class="bar bar-header">
            <h2 class="title">Erstelle ein Produkt</h2>
            <span ng-click="vm.cancelCreate()" class="cancel-create">Abbruch</span>
        </div>
        <div class="bar bar-subheader">
            <form class="create-form" role="form"
                  ng-submit="vm.create(vm.newObject)" novalidate>
                <div class="list">
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Name</span>
                        <input type="text" class="form-control"
                               ng-model="vm.newObject.name"
                               placeholder="Gib einen Namen ein">
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Beschreibung</span>
                    <textarea placeholder="Beschreibung" class="form-control"
                              ng-model="vm.newObject.description"></textarea>
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Preis</span>
                        <textarea placeholder="Preis" class="form-control"
                                  ng-model="vm.newObject.price"
                                  typeof="float"></textarea>
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Bild</span>
                        <input type="text" class="form-control"
                               ng-model="vm.newObject.imgurl"
                               placeholder="Gib einen Bildlink ein">
                    </label>
                </div>
                <button class="button button-block button-balanced" type="submit">Fertig</button>
            </form>
        </div>
    </ion-content>
</div>
<div ng-if="vm.isEditing && !vm.isCreating">
    <ion-content class="padding has-header">
        <!-- Bearbeiten -->
        <div class="bar bar-header bar-secondary">
            <h1 class="title">Bearbeiten</h1>
            <span ng-click="vm.cancelEditing()" class="cancel-create">Abbrechen</span>
        </div>
        <div class="bar bar-subheader">
            <form class="edit-form" role="form"
                  ng-submit="vm.update(vm.edited)" novalidate>
                <div class="list">
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Name</span>
                        <input type="text" class="form-control"
                               ng-model="vm.edited.name"
                               placeholder="Gib einen Namen ein">
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Beschreibung</span>
                <textarea class="form-control"
                          ng-model="vm.edited.description"
                          placeholder="Beschreibung"></textarea>
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Preis</span>
                        <textarea placeholder="Preis" class="form-control"
                                  ng-model="vm.edited.price"
                                  type="float"></textarea>
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Bild</span>
                        <textarea class="form-control"
                                  ng-model="vm.edited.imgurl"
                                  placeholder="Bildlink"></textarea>
                    </label>
                    <label class="item item-input item-stacked-label">
                        <span class="input-label">Auswählen</span>
                        <textarea class="form-control"
                                  ng-model="vm.edited.check"
                                  placeholder="true" type="boolean"></textarea>
                    </label>
                </div>
                <button class="button button-block button-balanced" type="submit">Speichern</button>
            </form>
        </div>
    </ion-content>
</div>

Answer 1

thanks for using Backand! There is a default page size filter that you can modify in your getList() call. It is available in our new SDK - if you update to the latest version of the starter project you downloaded, it should already have the appropriate changes built-in. For reference, our new SDK can be found at https://github.com/backand/vanilla-sdk

Regarding resolving your issue, in order to adjust the page size, you can pass in an additional parameter to the getList function that dynamically changes the number of records you can retrieve. Here's some sample code that matches your use case:

service.all = function () {
    params = { pageSize: 100 }; // Changes page size to 100
    return Backand.object.getList('items', params);
};

Using the old SDK, you can do something similar by appending the parameters query param to the URL you use to drive your GET request.