Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >应用程序不会显示所有项目(Ionic、Backand)

应用程序不会显示所有项目(Ionic、Backand)
EN

Stack Overflow用户
提问于 2017-02-15 15:50:59
回答 1查看 92关注 0票数 1

我想做一个显示一些项目的应用程序,所以我找到了backand template (https://market.ionic.io/starters/backand-simple)并使用了它。我的数据库中有大约40个项目,但应用程序只显示前20个项目。

我的controller.js

代码语言:javascript
运行
AI代码解释
复制
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

代码语言:javascript
运行
AI代码解释
复制
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();
    };
});

我的仪表板-tab//其中显示项目

代码语言:javascript
运行
AI代码解释
复制
<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>

EN

回答 1

Stack Overflow用户

发布于 2017-02-15 21:30:40

感谢您使用Backand!您可以在getList()调用中修改默认的页面大小过滤器。它在我们的新SDK中可用-如果您更新到您下载的starter项目的最新版本,它应该已经内置了适当的更改。作为参考,我们的新软件开发工具包可以在https://github.com/backand/vanilla-sdk上找到

关于解决您的问题,为了调整页面大小,您可以向getList函数传递一个额外的参数,该参数动态地更改您可以检索的记录数。下面是一些与您的用例相匹配的示例代码:

代码语言:javascript
运行
AI代码解释
复制
service.all = function () {
    params = { pageSize: 100 }; // Changes page size to 100
    return Backand.object.getList('items', params);
};

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42254020

复制
相关文章
最新ionic-cli创建ionic3而非ionic4的项目
在ionic CLI v4.8.0版本创建项目时,会询问是创建ionic3还是ionic4项目,然而更新到 ionic CLI v4.10.2(latest)时,这个询问提示消失了,直接默认创建ionic3项目,而且看参数是没有创建ionic3项目支持的,于是,我上Github发了个issue: How to create ionic3 project by ionic CLI v4.10.2(latest)
IT晴天
2019/03/06
1.5K0
Ionic安装环境安装关于墙国环境创建Ionic项目测试运行项目
环境安装 先安装Node.js,网址 www.nodejs.org 下载地址是:https://nodejs.org/en/download/current/, 如果不是请自行在官网上查找。安装一路
孙亖
2018/06/06
1.3K0
Wordpress显示所有文章
使用下面loop只能展示当前分类下的文章 <?php if(have_posts()): ?> <?php while(have_posts()):the_
切图仔
2022/09/14
7590
Flutter 应用程序中显示应用程序通知
要使用 Overlay 功能,我们必须将 Material 应用程序包装在OverlaySupport小部件中。
徐建国
2021/11/30
1.8K0
Flutter 应用程序中显示应用程序通知
[前端][ionic2]ionic2项目环境搭建
最开始用npm安装ionic,记得把npm升级一下到最新版本。npm install –g ionic 记得要全局安装。
Tuzei
2020/03/16
4880
Ionic用于构建跨平台移动应用程序的开源框架
Ionic框架和小程序容器技术可以结合使用,以在小程序平台上构建跨平台移动应用程序。通过将Ionic应用嵌套在小程序的WebView中或利用小程序桥接插件实现与小程序环境的通信,开发者可以在小程序平台上利用Ionic框架提供的跨平台开发能力和丰富的用户界面组件。这种结合为开发者提供了更多选择和灵活性,能够同时享受到Ionic框架和小程序平台的优势。 Ionic是一个用于构建跨平台移动应用程序的开源框架。它结合了HTML、CSS和JavaScript等技术,帮助开发者创建具有原生应用体验的移动应用程序。Ionic提供了一套用户界面组件和工具,可用于构建高度交互和美观的移动应用界面。
菜特鸡鼻涕
2023/06/25
3870
【初探IONIC】不会Native可不可以开发APP?
前言 Hybrid技术流行已经有一段日子了,楼主的关注点也一直围绕着移动端围绕着Hybrid相关展开,Hybrid已经是大大提升开发效率的开发方式了,但是仍然需要至少一个IOS与Andriod,那么可不可以只使用H5相关的知识就能做一个APP出来呢?答案是可以的。 什么是cordova? cordova为一移动开发框架,他让我们可以仅仅专注前端代码,然后通过一个开发框架编译形成一个可安装的APP,因为前端代码的特性,所以这种APP是跨平台的,可以最大程度的提升开发效率,因为只需要前端人员,其成本节约也是不可
逸鹏
2018/04/10
2.4K0
【初探IONIC】不会Native可不可以开发APP?
ionic这几天无法创建项目的分析说明
原来ionic-cli执行ionic start 时,获取github上的项目模版到本地,再执行npm install,但随着ionic3已经稳定了,为不占用ionic4的资源,也便于较快下载模版,模版压缩成tar.gz存放到别处——当前是放在https://d2ql0qc7j8u4b2.cloudfront.net上,所以如果下载不了,先看看能不能访问该网站。
IT晴天
2018/08/20
8400
Ionic 开发之 Ionic Storage 详解
Ionic Storage 是一款基于 localForage 用于 Ionic 应用程序的简单 “键-值” 存储模块,支持 SQLite 开箱即用。该工具可以根据平台自动选择最佳的存储引擎,而不用用户关系具体的使用细节。模块内存储引擎的默认选择顺序是 SQLite,IndexedDB,WebSQL 和 LocalStorage。
阿宝哥
2019/11/06
4K0
【组件篇】ionic3均分列等宽高图像显示(下)
那就是它依赖一个addImage(用于添加的仿按钮图像),如果我没有这个东西,逻辑上是不是就不能用了?是的!那为了使得这个组件能更通用些,改造一下:
IT晴天
2018/08/20
4550
Ionic 2 项目结构./src/index.html./src/./src/app/app.html
解剖Ionic 2 app。进入项目创建的文件夹,这里有一个典型的Cordova项目结构,我们可以安装原生插件,创建平台定义工程文件。 ./src/index.html src/index.html是app的主入口, 设置脚本和CSS,引导、启动我们的应用。对于app的应用,Ionic在HTML中寻找<ion-app>标签。 <ion-app></ion-app> 下面的代码接近底部: <script src="cordova.js"></script> <script src="build/main.js
孙亖
2018/06/06
2.9K0
xwiki介绍-所有项目
xwiki有以下类型项目: Top Level Projects: 这些活跃的项目由xwiki开发团队积极的开发中 Contrib Projects: 这些项目不是由xwiki开发团队开发,是一些基于xwiki底层开发的贡献项目 Retired Projects: 这些都是那些曾经被XWiki开发团队开发的活动项目,现在已经作为退休项目被移到在contrib里面,通常是因为有更好的替代品。他们曾经为我们提供了很好的服务,现在等着一些人接管他们,给他们注入新的活力 Top Level Projects 项目名
lovelife110
2021/01/14
9180
xwiki介绍-所有项目
LabVIEW设置应用程序显示标签透明
在美化应用程序时,有时候需要将某些标签设置为透明状态,之前在LabVIEW设计自定义滚动条博文中制作的滚动条是一种方式,但是这种方式明显过于复杂。
不脱发的程序猿
2022/04/13
9930
LabVIEW设置应用程序显示标签透明
使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结
本文使用Ionic2从头建立一个简单的Todo应用,让用户可以做以下事情: 查看todo列表 添加新的todo项 查看todo详情 保存 todo到持久化存储 0 开始之前 本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有,先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架,但有一些示例代码供我们使用。 运行以下命令创建新项目 ionic start ionic-todo blank --v2 一
孙亖
2018/06/06
6.2K0
【组件篇】ionic3均分列等宽高图像显示(上)
我在《ionic3开源组件》提到了图片选择组件,但是后来发现其实现功能很简单,而且我不喜欢它写死了宽高大小,这对于不同分别率不太友好。于是尝试实现了一下,先上效果图:
IT晴天
2018/08/20
8010
构建具有用户身份认证的 Ionic 应用
使用 Okta 和 OpenID Connect (OIDC),可以很轻松的在 Ionic 应用中添加身份认证,完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证,本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录; 由于功能还在开发中,所以省略了用户注册。
叙帝利
2018/07/31
24K0
构建具有用户身份认证的 Ionic 应用
构建具有用户身份认证的 Ionic 应用
序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。因为文章是去年发表,所以教程内关于 Okta 的一些使用步骤不太准确,但是通过 Okta 的官网也可以找到对应的内容。另外,使用 npm 安装 Ionic starter 模板可能会有安装失败的情况,建议不要在这方面浪费太多时间,可以直接在 Ionic 的 GitHub 仓库 中下载 starter 模板。 原文:How to Sprinkle ReactJS i
叙帝利
2018/05/28
23.4K0
Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。 1 创建一个新的Ionic 2 应用 我们将使用有Ionic团队创建的tutorial模板,可见于官方教程,来创建我们的应用程序。要做到这一点,您需要运行以下命令: ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。为运行后续的命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用
孙亖
2018/06/06
4.5K0
OpenStack显示项目列表
[root@controller ~]# openstack project list ID Name ad8d7966165b4619aab21300e50f7020 service b03aac1f6ae94f7bada2afa8f2064312 admin bdc7f07c4d2c42439d3f4ecb4a3d7b59 myproject
院长技术
2020/06/13
1.2K0
IntelliJ IDEA - open 项目后只显示项目中的文件,不显示项目结构
导入之后如下,如果没有显示项目,加入点击 Add Content Root 加入项目路径
小菠萝测试笔记
2021/06/29
2.5K0

相似问题

如何在Ionic2应用程序中设置Backand?

16

如何用Backand和Ionic存储图像?

20

ExpanderView不会显示所有项目

25

Backand:无法通过Backand登录应用程序

11

ionic2向Backand发送对象数据

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文