Question

我想创建一个显示一些项目的应用程序，所以我找到了backand模板（https://market.ionic.io/starters/backand-simple）并使用了它。我的数据库中有大约40个项目，但应用程序只显示前20个项目。

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();

});

我的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();
    };
});

我的信息中心标签//显示项目

<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

感谢您使用Backand！您可以在getList（）调用中修改默认页面大小过滤器。它在我们的新SDK中可用 - 如果您更新到下载的初始项目的最新版本，它应该已经内置了相应的更改。作为参考，我们的新SDK可以在https://github.com/backand/vanilla-sdk

找到

关于解决您的问题，为了调整页面大小，您可以将另一个参数传递给getList函数，该函数会动态更改您可以检索的记录数。以下是一些与您的用例匹配的示例代码：

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

使用旧的SDK，您可以通过将参数查询参数附加到用于驱动GET请求的URL来执行类似的操作。

应用程序不会显示所有项目（Ionic，Backand）

1 个答案: