ionic listview对象的编辑、排序和删除
1)ionic的listview对象即<ion-list></ion-list>
2)添加并显示编辑按钮(添加其他自定义按钮也一样)
can-swipe属性设置为true(默认就是true),在ion-item里添加一个编辑按钮
<ion-list can-swipe="true">
<ion-item ng-repeat="item in lists">
{{item.name}}
<ion-option-button class="button-assertive" ng-click="edit(item)">Edit</ion-option-button>
</ion-item>
</ion-list>
3)添加并显示排序按钮
排序按钮有自己名字,不是用<ion-option-button></ion-option-button>,排序按钮名字为:<ion-reorder-button></ion-reorder-button>
使用方法也很简单,ion-list的show-reoder属性设置为true,再在ion-item里添加一个排序按钮就行了
<ion-list show-reorder="true">
<ion-item ng-repeat="item in lists">
{{item.name}}
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
4)添加并显示删除按钮
方法同上,删除按钮的名字为:<ion-delete-button></ion-delete-button>
使用方法也是先在ion-list上设置show-delete属性为true,再ion-item里添加一个删除按钮就行了
<ion-list show-delete="true">
<ion-item ng-repeat="item in lists">
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"></ion-delete-button>
{{item.name}}
</ion-item>
</ion-list>
PS1:上面说的 show-reorder、show-delete 一般我们不会是一进入列表就显示的,需要进行排序、删除操作里才显示出按钮,所以show-reorder、show-delete当然不必直接写死true/false啦,可以使用$scope变量就可以了
示例:
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder"></ion-list>
PS2:上面的on-reorder是排序操作的回调操作,每次改变item的排序后都会回调,ng-click不用说就一个点击事件
PS3:不管是编辑、排序或删除,其实就是一个数据操作,改变数据数组的值就可以了,下面给出一下官方的js参考
$scope.edit = function(item) {
alert('Edit Item: ' + item.id);
};
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.lists.splice(fromIndex, 1);
$scope.lists.splice(toIndex, 0, item);
};
$scope.onItemDelete = function(item) {
$scope.lists.splice($scope.lists.indexOf(item), 1);
};
实际应用时,用的是数据库的数据,不只是操作数组就完事了,不过那也只是写个异步处理一下就可以了,这里就不说了
官方文档:http://ionicframework.com/docs/api/directive/ionList/
ionic listview对象的编辑、排序和删除的更多相关文章
- [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能
感谢eoe社区的分享 最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...
- Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...
- Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Android 长按Listview显示CheckBox,实现批量删除。
ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...
- ListView列表拖拽排序
ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...
- 使用ADO对象添加、修改、删除数据
使用ADO对象对数据库中的数据进行添加.修改和删除等操作.首先创建一个ADO类,通过ADO类连接数据库,并打开记录集.例如,使用ADO对象添加.修改.删除数据,程序设计步骤如下:(1)创建一个基于对话 ...
- UITableView 编辑模式(增加-删除-移动---自定义左滑 title)
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- C#对象内部属性排序测试
构建对象: class SortGrid { int indexI; int indexJ; public SortGrid(int x, int y) { indexI = x; indexJ = ...
随机推荐
- 新浪微博XSS攻击事件
http://blog.csdn.net/terryzero/article/details/6575078 6月28日20时14分左右开始,新浪微博出现了一次比较大的XSS攻击事件.大量用户自动发送 ...
- 【ASP.NET MVC系列】浅谈MVC
描述 本篇文章主要概述ASP.NET MVC,具体包括如下内容: 1.MVC模式概述 2.WebForm概述 3.WebForm与MVC区别 4.ASP.NET MVC发展历程 5.运用程序结构 6. ...
- 用QQ帐号和新浪微博帐号登录网站
用QQ帐号登录: 先去http://connect.qq.com/intro/login/申请 然后点击验证 将下面代码复制到网站首页中,放进去以后再点击验证就能得到ID和key 第一步:配置 ...
- 第十六周oj刷题——Problem E: B 构造函数和析构函数
Description 在建立类对象时系统自己主动该类的构造函数完毕对象的初始化工作, 当类对象生命周期结束时,系统在释放对象空间之前自己主动调用析构函数. 此题要求: 依据主程序(main函数)和程 ...
- CentOS 6.2下更新GCC
在centos中安装了QT5.1.0,发现无法启动,原因好像是GCC版本问题,所以就更新GCC. 1.下载GCC源码: 下载网址:http://ftp.gnu.org/gnu/gcc/gcc-4.8. ...
- python跳一跳辅助学习
微信跳一跳辅助工具 准备工具 adb驱动 安卓手机 打开手机的调试模式 usb接好手机和电脑 PyCharm:全宇宙唯一一款专门用于Python开发IDE工具 实现原理: 获取手机的实时的截图 点击起 ...
- springJDBC实现查询
其实在Spring这个框架中,提供了一些对JDBC访问数据库的封装,其中JdbcTemplate就是一个很好用的类,下面来 演示一下这个类的一些用法.首先需要导入commons-logging.jar ...
- 改进cocos2dx中lua读ccb的方法
cocos2dx自带的CCBProxy真弱,还好提供了一个CCBReaderLoader.lua,但是也不好用, 于是修改了一下CCBReaderLoader,下面直接贴代码了. function N ...
- Groovy学习()面向Java开发者的Groovy
第一段Groovy代码 // first groovy program for(int i = 0; i < 3; i++) { System.out.println("ho &quo ...
- tiny4412 u-boot 启动参数的设置
参考 http://www.cnblogs.com/chenfulin5/p/5887552.html 制作SD卡 u-boot 编译完之后, 进入 u-boot 目录里面的 sd_fuse cd ~ ...