<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. 课程二(Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization)，第三周（Hyperparameter tuning, Batch Normalization and Programming Frameworks） —— 2.Programming assignments

    Tensorflow Welcome to the Tensorflow Tutorial! In this notebook you will learn all the basics of Ten ...

  2. Linux后台进程管理以及ctrl+z（挂起）、ctrl+c（中断）、ctrl+\（退出）和ctrl+d（EOF）的区别(转)

    一.后台进程管理命令 fg.bg.jobs.&.ctrl + z.ctrl + c.ctrl + \.ctrl + d1. &加在一个命令的最后,可以把这个命令放到后台执行 ,如fir ...

  3. JVM（四）JVM的双亲委派模型

    1.两种不同的类加载器 从JAVA虚拟机的角度来讲,只存在两种不同的类加载器:一种是启动类加载器(Bootstrap ClassLoader),这个类加载器使用C++语言实现,是虚拟机自身的一部分:另 ...

  4. [转]cximage双缓冲绘图 .

    1.起因 本来是想用gdi绘图的,但是一想到用gdi+libpng,还要自己处理一些比如alpha的效果之类的巨麻烦(而且涉及到处理每一个像素点的计算,一般都很耗时),我对自己处理像素点的能力一直持有 ...

  5. Android 开发工具类 34_OpenFileUtil

    匹配文件后缀名 MIME 类型. import java.io.File; import android.content.Context; import android.content.Intent; ...

  6. scala-02-数组的操作

    scala中的数组和 java中的数组一样, 定义了长度后不可改变 1, 产生一个数组: 有3种创建数组的方式, 分别直接new, 直接赋值, 或者使用 Array中的rang来产生 /** * 获取 ...

  7. 【React 资料备份】React Hook

    Hooks是React16.8一个新增项,是我们可以不用创建class组件就能使用状态和其他React特性 准备工作 升级react.react-dom npm i react react-dom - ...

  8. C# Owin初探 概念理解（一）

    本文是阅读网上大牛的文章总结而成. 目录 1.Owin定义 2.为什么要用Owin 3.作用 4.总结 1.Owin定义 Owin是Open Web Interface For .NET.也就是.Ne ...

  9. [转]oracle in 多个字段

    本文转自:https://www.cnblogs.com/Springmoon-venn/p/7016409.html oracle 使用in的时候使用多个字段 这个也是刚需啊. 最近有个需求,在一堆 ...

  10. 自定义MVC的Helper扩展方法

    记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...