<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 java.lang.ExceptionInInitializerError 错误解决方案

    引起 java.lang.ExceptionInInitializerError 错误的原因是:在类的初始化时,出错.也就是说,在加载类时,执行static的属性.方法块时,出错了. 比如 publi ...

  2. xamarin 编译出现Xamarin.Build.Forms.Tasks.GetTaskAbi 无法加载的错误解决方法

    最新升级最新的vs2017后发现编译xamarin forms 会出现错误 Xamarin.Forms.Build.Tasks.GetTasksAbi task could not be loaded ...

  3. ES代码总结2

    本文部分转载于: http://www.cnblogs.com/luxiaoxun/p/4869509.html ElasticSearch的基本用法与集群搭建  一.简介 ElasticSearch ...

  4. Webflux快速入门

    SpringWebflux是SpringFramework5.0添加的新功能,WebFlux本身追随当下最火的Reactive Programming而诞生的框架,那么本篇就来简述一下这个框架到底是做 ...

  5. Struts框架核心工作流程与原理

    1.Struts2架构图  这是Struts2官方站点提供的Struts 2 的整体结构.  执行流程图 2.Struts2部分类介绍  这部分从Struts2参考文档中翻译就可以了. ActionM ...

  6. JAVA+SELENIUM+MAVEN+TESTNG框架（二）新建项目

    1.新建maven项目 2.下载selenium的jar包,放入maven依赖库中 3.新增testng依赖库,build path->add libirary->testng 4.查看自 ...

  7. rabbitmq 部署(二进制和rpm)与常用命令

    目录 一 rabbitmq 简介 二 erlang 安装 三 rabbitmq rpm安装 (二进制安装和rpm安装二选一) 四 rabbitmq 二进制安装(rpm 安装和二进制安装二选一) 五 初 ...

  8. Nginx+uwsgi+Django 的web应用环境部署-完整记录

    Python作为当前最火爆最热门,也是最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twisted.Bottle和Web.py等 ...

  9. java的构造方法链

    转自:http://blog.csdn.net/Mr_KkTian/article/details/70226561 1.简介 构造一个类的实例时, 将会调用沿着继承链的所有父类的构造方法. 当构造一 ...

  10. 使用node.js的开发框架express创建一个web应用

    1.1.1:搭建环境     1.安装Express           按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全 ...