列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。

<ion-list>

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

    Hello, {{item}}!

  </ion-item>

</ion-list>

高级用法: 缩略图，删除按钮，重新排序，滑动

<ion-list ng-controller="MyCtrl"

          show-delete="shouldShowDelete"

          show-reorder="shouldShowReorder"

          can-swipe="listCanSwipe">

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

            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">

    <h2>{{item.title}}</h2>

    <p>{{item.description}}</p>

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

                       ng-click="share(item)">

      分享

    </ion-option-button>

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

                       ng-click="edit(item)">

      编辑

    </ion-option-button>

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

                       ng-click="items.splice($index, 1)">

    </ion-delete-button>

    <ion-reorder-button class="ion-navicon"

                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">

    </ion-reorder-button>

  </ion-item>

</ion-list>



实例
HTML 代码：

<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="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

  </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>

CSS 代码

body {

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

}

JavaScript 代码

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 }

  ];

});







Ionic Js九：列表操作的更多相关文章

  1. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  2. day6(列表操作、列表练习题)

    一.列表操作 a) 循环 基本语法 for i in  value : L1 =['a','b','c','d',1,2,3,4,5,6,'b','D'] for i in L1: print(i) ...

  3. 15个Node.js项目列表

    前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...

  4. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  5. Ionic Js十一：模态

    ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id=" ...

  6. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  7. js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip

    push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会依次添加到数组的末尾. 该函数属于Array对象,所有主流浏览器均支持该函数. 语法 array.push( ite ...

  8. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  9. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

随机推荐

  1. android 低功耗蓝牙使用

    参考链接:http://blog.csdn.net/xubin341719/article/details/38584469 1.android 手机的低功耗蓝牙,又称BLE :BLE在andriod ...

  2. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app，第二部分（Page 7）

    编写你的第一个 Django app,第二部分(Page 7)转载请注明链接地址 本教程上接前面的教程.我们会配置数据,创建你的第一个 model,并对Django 自动生成的 admin 站点进行快 ...

  3. HTML中添加<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    https://www.cnblogs.com/nxl0908/p/7245837.html Edge模式告诉IE以最高级 模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免 ...

  4. UCenter在JAVA项目中实现的单点登录应用实例

    Comsenz(康盛)的UCenter当前在国内的单点登录领域占据绝对份额,其完整的产品线令UCenter成为了账号集成方面事实上的标准. 基于UCenter,可以将Comsenz旗下的Discuz! ...

  5. 在windows的IDEA运行Presto

    After building Presto for the first time, you can load the project into your IDE and run the server. ...

  6. slice层解析

    如果说之前的Concat是将多个bottom合并成一个top的话,那么这篇博客的slice层则完全相反,是把一个bottom分解成多个top,这带来了一个问题,为什么要这么做呢?为什么要把一个低层的切 ...

  7. POJ 2449 Remmarguts' Date (K短路 A*算法）

    题目链接 Description "Good man never makes girls wait or breaks an appointment!" said the mand ...

  8. Python概念-Item系列(林海峰教的)

    这个Item系列是egon老师自创的,个人还是可以接受这种文化底蕴的,所以直接拿来用,也是毫无违和感的 所谓Attr系列,其实是__setattr__,__delattr__,__getattr__ ...

  9. 数位DP入门（A - 不要62 HDU - 2089 &&B - Bomb HDU - 3555 ）

    题目链接:https://cn.vjudge.net/contest/278036#problem/A 具体思路:对于给定的数,我们按照位数进行运算,枚举每一位上可能的数,在枚举的时候需要注意几个条件 ...

  10. CSS 实现单边阴影

    box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 o ...