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/
最新文章
- 2016.10.29 清北学堂NOIP冲刺班Day1 AM 考试总结
- JMeter学习-027-JMeter参数文件(脚本分发)路径问题:jmeter.threads.JMeterThread: Test failed! java.lang.IllegalArgumentException: File distributed.csv must exist and be readable解决方法
- AtomineerUtils爆破过程记录
- HBase应用开发回顾与总结系列之二:RowKey行键设计规范
- 20145337《Java程序设计》第三周学习总结
- MySQL v5.1.72 + v5.6.19
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环&#183;&#183;&#183;
- (转载)static全局变量与普通的全局变量有什么区别?
- iframe与include的区别
- hadoop单线程实现server多socket连接读取数据原理分析
- android开发中的5种存储数据方式
- 关于IoAttachDeviceToDeviceStack
- 编译不通过:提示XXXX不是类或命名空间名 的解决办法
- 【Itext】7步制作Itext5页眉页脚pdf实现第几页共几页
- td里的内容宽度自适应 及 鼠标放上显示标题div title
- 如何通过命令或脚本方式在Windows上访问linux系统
- 推送提交(git push)
- [转]C# serialPort 串口接收中this.Invoke的使用
- Kernel parameters for Db2 database server installation (Linux and UNIX)
- (2018干货系列十)最新android开发学习路线整合
热门文章
- Git 修改用户名以及提交邮箱
- 用lambda表达式树替代反射
- STM32出现HardFault故障的解决方法
- 从JSON数据中取出相关数据
- Atitit. 解释器模式框架选型 and应用场景attilax总结 oao
- [elk]Mutate filter plugin增删改查字段
- CSectsInfomation.cpp文件
- HDU 3336 Count the string 查找匹配字符串
- 03、Windows Phone 套接字(Socket)实战之WP客户端设计
- 实战 Lucene,第 1 部分: 初识 Lucene (zhuan)