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对象的编辑、排序和删除的更多相关文章

  1. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  2. Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音

    转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...

  3. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  4. Android 长按Listview显示CheckBox,实现批量删除。

    ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...

  5. ListView列表拖拽排序

    ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...

  6. 使用ADO对象添加、修改、删除数据

    使用ADO对象对数据库中的数据进行添加.修改和删除等操作.首先创建一个ADO类,通过ADO类连接数据库,并打开记录集.例如,使用ADO对象添加.修改.删除数据,程序设计步骤如下:(1)创建一个基于对话 ...

  7. UITableView 编辑模式(增加-删除-移动---自定义左滑 title)

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  8. AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...

  9. C#对象内部属性排序测试

    构建对象: class SortGrid { int indexI; int indexJ; public SortGrid(int x, int y) { indexI = x; indexJ = ...

随机推荐

  1. PHP-数据库长连接mysql_pconnect的细节

    PHP的MySQL持久化连接,美好的目标,却拥有糟糕的口碑,往往令人敬而远之.这到底是为啥么.近距离观察后发现,这家伙也不容易啊,要看Apache的脸色,还得听MySQL指挥. 对于作为Apache模 ...

  2. Zoie中文文档及简单解析

    https://linkedin.jira.com/wiki/pages/viewpage.action?pageId=4456480 一.总体架构 Zoie是一个实时的搜索引擎系统,其需要逻辑上独立 ...

  3. Android实现开机自动运行程序

    有些时候,应用需要在开机时就自动运行,例如某个自动从网上更新内容的后台service.怎样实现开机自动运行的应用?在撰写本文时,联想到高焕堂先生以“Don't call me, I'll call y ...

  4. static 与单例模式、auto_ptr与单例模式、const 用法小结、mutable修饰符

    一.static 与单例模式 单例模式也就是简单的一种设计模式,它需要: 保证一个类只有一个实例,并提供一个全局访问点 禁止拷贝  C++ Code  1 2 3 4 5 6 7 8 9 10 11 ...

  5. hibernate 中多对多关系对象集合的保存

    多对多关系映射和一对多关系映射开发步骤差不多, 例子如下:员工和项目之间的关系,一个员工可以参与多个项目:一个项目可以有多个开发人员参与.因此是多对多的关系. 1 分析数据表 1.1)员工表 CREA ...

  6. 动态时间规整-DTW算法

    作者:桂. 时间:2017-05-31  16:17:29 链接:http://www.cnblogs.com/xingshansi/p/6924911.html 前言 动态时间规整(Dynamic ...

  7. HTTP长连接?短连接?长轮询?短轮询?

    错觉与突然的察觉 大多数人都知道HTTP1.0不支持长连接,知道HTTP1.1支持长连接. 这是业界的一个常识. 然而这样的描述导致了一些不做网络底层开发的开发者都下意识的认为HTTP1.1是一个可以 ...

  8. AESDK AE中层类型的3种取得方式

    有一部分属于类型标志,比如调节层,空对象层.用mSuites->LayerSuite7()->AEGP_GetLayerFlags去取 而灯光,文字这些信息,直接取类型即可 mSuites ...

  9. Struts2 上传下载

    一. 1.文件上传是web应用经常用到的一个知识.原理是,通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数 据以二进制编码的方式提交,在接收此请求的Se ...

  10. iPhone应用程序的启动过程

    Phone的入口函数main,这之后它有是怎样启动应用程序,初始化的呢,这些都是通过 UIApplicationMain 来实现的. 其启动的流程图大致如下图所示: 1 int retVal = UI ...