<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. 二分查找的实现（java版本）

    一.二分法查找的定义 依次将所查找数据与中心数据对比,根据大小调整数据边界二.二分查找的条件 数组必须排序三.二分查找的原理 四.二分法查找的代码 /* * 从数组当中找到4所在的索引: * {2,4 ...

  2. python使用(一)

    1.hellopython.py 2.base_option.py 3.str_option.py 4.time_option.py hellopython.py # coding=utf8 __au ...

  3. 一口一口吃掉Hexo（三）

    如果你想得到更好的阅读效果,请访问我的个人网站 ,版权所有,未经许可不得转载! 相信通过前一节的学习,你已经在你的本地部署好了你的网站,那么接下来就让你的朋友们通过网络访问你的网站吧!通过这一节你将免 ...

  4. Android：一个高效的UI才是一个拉风的UI（二）

    趁今晚老大不在偷偷早下班,所以有时间继续跟大伙扯扯UI设计之痛,也算一个是对上篇<Android:一个高效的UI才是一个拉风的UI(一)>的完整补充吧.写得不好的话大家尽管拍砖~(来!砸死 ...

  5. java web 中 filter 与 servlet的关系

    过滤器的转载顺序是服务器按照we.xml文件中定义的顺序从后往先的顺序转载的,而过滤的顺序就是按照先后顺序过滤的,而销毁也是从后往先销毁的.

  6. How to check Logstash's pulse

    Have you ever wondered if Logstash was sending data to your outputs? There's a brand new way to chec ...

  7. Go的基本类型与变量

    基本类型 布尔型:bool 长度:1字节 取值范围:true,false 注意:不可以用数字代表true或false 整型:int/uint 根据运行平台可能为32或64位 8位整型:int8/uin ...

  8. [总结]其他杂项数学相关（定理&证明&板子）

    目录 写在前面 一类反演问题 莫比乌斯反演 快速莫比乌斯变换(反演)与子集卷积 莫比乌斯变换(反演) 子集卷积 二项式反演 内容 证明 应用举例 另一形式 斯特林反演 第一类斯特林数 第二类斯特林数 ...

  9. MVC应用程序播放FLV视频，部分视图可多地方重复引用

    网页上播放Falsh之外,还有一种格式就是FLV的视频,也是最常见的.Insus.NET再想在MVC应用程序实现这功能. 实现这个功能,需要从网上下载一个叫vcastr22.swf.如果在网上找不到, ...

  10. Linux分区方式及关闭iptables和selinux的方式

    分区方式一般有三种 第一种:数据不是很重要 /boot(系统的引导分区): 系统引导的信息/软件 系统的内核   200M swap( 交换分区): 为了避免系统内存用光了导致系统 宕机 如果系统内存 ...