<html ng-app="ionicApp">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>Ionic List Directive</title>

  <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">

  <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

  <script>

    angular.module('ionicApp', ['ionic'])

      .controller('MyCtrl', function($scope) {

        $scope.data = {

          showDelete: false

        };

        $scope.edit = function(item) {

          alert('Edit Item: ' + item.id);

        };

        $scope.share = function(item) {

          alert('Share Item: ' + item.id);

        };

        $scope.moveItem = function(item, fromIndex, toIndex) {

          $scope.items.splice(fromIndex, 1);

          $scope.items.splice(toIndex, 0, item);

        };

        $scope.onItemDelete = function(item) {

          $scope.items.splice($scope.items.indexOf(item), 1);

        };

        $scope.items = [

          { id: 0 },

          { id: 1 },

          { id: 2 },

          { id: 3 },

          { id: 4 },

          { id: 5 },

          { id: 6 },

          { id: 7 },

          { id: 8 },

          { id: 9 },

          { id: 10 },

          { id: 11 },

          { id: 12 },

          { id: 13 },

          { id: 14 },

          { id: 15 },

          { id: 16 },

          { id: 17 },

          { id: 18 },

          { id: 19 },

          { id: 20 },

          { id: 21 },

          { id: 22 },

          { id: 23 },

          { id: 24 },

          { id: 25 },

          { id: 26 },

          { id: 27 },

          { id: 28 },

          { id: 29 },

          { id: 30 },

          { id: 31 },

          { id: 32 },

          { id: 33 },

          { id: 34 },

          { id: 35 },

          { id: 36 },

          { id: 37 },

          { id: 38 },

          { id: 39 },

          { id: 40 },

          { id: 41 },

          { id: 42 },

          { id: 43 },

          { id: 44 },

          { id: 45 },

          { id: 46 },

          { id: 47 },

          { id: 48 },

          { id: 49 },

          { id: 50 }

        ];

      });

  </script>

  <style>

    body {

      cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;

    }

  </style>

</head>

<body ng-controller="MyCtrl">

<ion-header-bar class="bar-positive">

  <div class="buttons">

    <button class="button button-icon icon ion-ios-minus-outline"

            ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>

  </div>

  <h1 class="title">Ionic Delete/Option Buttons</h1>

  <div class="buttons">

    <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">

      Reorder

    </button>

  </div>

</ion-header-bar>

<ion-content>

  <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

  <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

    <ion-item ng-repeat="item in items"

              item="item"

              href="#/item/{{item.id}}" class="item-remove-animate">

      Item {{ item.id }}

      <ion-delete-button class="ion-minus-circled"

                         ng-click="onItemDelete(item)">

      </ion-delete-button>

      <ion-option-button class="button-assertive"

                         ng-click="edit(item)">

        Edit

      </ion-option-button>

      <ion-option-button class="button-calm"

                         ng-click="share(item)">

        Share

      </ion-option-button>

      <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>

    </ion-item>

  </ion-list>

</ion-content>

</body>

</html>

ionic左滑删除的更多相关文章

  1. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  2. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

  3. 模仿QQ左滑删除

    需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...

  4. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  5. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  6. wex5 实战 苹果左滑删除与长按编辑

    用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一   ...

  7. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  8. Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  9. Android ListView左滑删除、左滑自定义功能

    最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...

随机推荐

  1. Hadoop框架之HDFS的shell操作

    既然HDFS是存取数据的分布式文件系统,那么对HDFS的操作,就是文件系统的基本操作,比如文件的创建.修改.删除.修改权限等,文件夹的创建.删除.重命名等.对HDFS的操作命令类似于Linux的she ...

  2. 线程中消费者生产者的实例代码(synchronized关键字)

    http://www.cnblogs.com/DreamDrive/p/6204665.html  这个是用Lock类实现的. 场景: 厨师类: import java.util.List; impo ...

  3. Shell 流程控制 if while for

    if else if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): if [ $(p ...

  4. puppet的使用：ERB模板介绍

    ERB介绍 全称是Embedded RuBy,意思是嵌入式的Ruby,是一种文本模板技术,用过JSP的话,会发现两者语法很像. 我们项目中一般用ERB来产生各模块的配置文件.ERB模板也可以用来产生W ...

  5. Selenium自动化测试Python一：Selenium入门

    Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介绍Selenium的入门知识以及Selenium的前置知识. 自动化测试的基础 在Selenium的课程以前,我们先回顾一下软件 ...

  6. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  7. 一段奇妙的vim编辑器之旅

    一.背景 对于Linux服务器上的操作,我们往往少不了使用vim,而有时候我对vim的使用并没有那么的熟练和深入,这周就深入的学习了vim的使用,包括入门和进阶,先分享给你们,也方便自己以后复习查询. ...

  8. 如何恢复windows的exe文件的默认打开方式

    事情由来: 有一次在用一个播放器选择打开视频文件的时候,意外的手贱点击打来了 exe 文件,之后戏剧性的恶心开始了,首先当然是打开失败,接着整个桌面的 exe 文件全部被替换成那个播放器的图标,然后所 ...

  9. Git笔记：Git介绍和常用命令汇总

    Git 是一个开源的分布式版本控制系统,与 CVS, Subversion 等不同,它采用了分布式版本库的方式,不需要服务器端软件支持. 工作流程 Git 的工作流程大致如下: 克隆 Git 资源作为 ...

  10. 面试题---实现strcpy函数

    #include <stdio.h> char *strcpy(char *strDest,char *strSrc) { if(strDest == NULL || strSrc == ...