<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. (转)SSL/TLS 漏洞“受戒礼”,RC4算法关闭

    原文:https://blog.csdn.net/Nedved_L/article/details/81110603 SSL/TLS 漏洞“受戒礼” 一.漏洞分析事件起因2015年3月26日,国外数据 ...

  3. idea 运行scala代码 报错：Exception in thread "main" java.lang.NoClassDefFoundError: scala/Predef$ java.lang.NoClassDefFoundError: scala/Function0 Error: A JNI error has occurred, please check your installati

    各种报错信息如下: java.lang.NoClassDefFoundError: scala/Function0 at java.lang.Class.getDeclaredMethods0(Nat ...

  4. CentOS下使用crontab命令来定时执行任务

    原文地址:http://www.centoscn.com/CentOS/help/2015/0424/5261.html crontab命令 是用来让使用者在固定时间或固定间隔执行程序之用,换句话说, ...

  5. android app性能优化大汇总（google官方Android性能优化典范 - 第3季）

    (1)Fun with ArrayMaps 程序内存的管理是否合理高效对应用的性能有着很大的影响,有的时候对容器的使用不当也会导致内存管理效率低下.Android为移动操作系统特意编写了一些更加高效的 ...

  6. iOS Round Double value to 2 decimal digits and round 3rd decimal digit up

    I have I double value like this one 17.125. It should be rounded up to 17.13 If I use the simple met ...

  7. 【JAVA】异常笔记

    自定义异常需要注意: 所有异常都必须是 Throwable 的子类. 如果希望写一个检查性异常类,则需要继承 Exception 类. 如果你想写一个运行时异常类,那么需要继承 RuntimeExce ...

  8. Linux系列：Fedora虚拟机设置固定IP上网（配置IP、网关、DNS、防止resolv.conf被重写）

    首先声明:该方法在Fedora 17和18版本下有效,其它版本也许可行也许有所差异. 1.  虚拟机相关配置 如果不是虚拟机系统,则这步不需要,若是相关配置详细信息请看“Linux系列:Ubuntu虚 ...

  9. git命令小记

    1.git之tag git标签分为轻量级(lightweight)标签和含标注(annotated)标签.轻量级标签一般用于不会改变的分支,含标注的标签包含详细的信息. 轻量级标签: git tag ...

  10. 【LeetCode题解】61_旋转链表（Rotate-List）

    目录 描述 解法:双指针 思路 Java 实现 Python 实现 复杂度分析 描述 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1-> ...