列表是一个应用广泛在几乎所有移动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. presto架构和原理

    Presto 是 Facebook 推出的一个基于Java开发的大数据分布式 SQL 查询引擎,可对从数 G 到数 P 的大数据进行交互式的查询,查询的速度达到商业数据仓库的级别,据称该引擎的性能是 ...

  2. windows设置代理.bat 脚本

    按照下列脚本复制到记事本中,保存,重命名后缀为.bat,使用时双击即可. 设置代理.bat,修改下列脚本中的代理地址和端口号 @echo off echo 开始设置IE代理上网 reg add &qu ...

  3. 《大型网站SEO优化实践》学习分享

    本文主要内容源自2013年阿里技术嘉年华中阿里巴巴周文君分享<大型网站SEO优化实践>.学习过后,受益匪浅,特作笔记,经常回顾吸收学习. 大型网站SEO的特点&优势&挑战 ...

  4. 推荐一些我所用的firefox 附加组件。

    firefox之所以强大,很大程度上是因为它有着超多的扩展组件,来实现许多有趣的功能.这几天把我装的firefox附加组件整理下,个人认为是一般上网常用或者可以说是必备的组件,o(∩_∩)o ,晒晒. ...

  5. FPGA基础知识8(FPGA静态时序分析)

    任何学FPGA的人都跑不掉的一个问题就是进行静态时序分析.静态时序分析的公式,老实说很晦涩,而且总能看到不同的版本,内容又不那么一致,为了彻底解决这个问题,我研究了一天,终于找到了一种很简单的解读办法 ...

  6. PartyPlay发布版

    发布版本在beta版本的基础之上修改了pose王中的显示函数部分,使其可以正常的多次显示不同图片,不会出现卡在一张图片的问题上. 因此总的发布版本内容: 1.谁是卧底: 点击进入谁是卧底,进入游戏前的 ...

  7. Chip Factory(HDU5536 + 暴力 || 01字典树）

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5536 题目: 题意: 对于给定的n个数,求出三个下标不同的数使得(si+sj)^sk最大. 思路: ...

  8. celery简介

    目录 Celery简介 Celery架构 中间件选择 Celery序列化 简单项目 Celery简介 celery userguide 知乎大神解释celery Celery(芹菜)是基于Python ...

  9. www.sojson.com网站高级JS加密破解

    在网上冲浪,看到了一个网站的JS加密,下面有一句话: 乍一看这句话吓一跳,我去这么猛,然后就很有兴趣想看看究竟是怎样一种加密算法. 对于破解JS加密算法的时候,都是先输入一个简单的语句然后分析加密后语 ...

  10. 10种CSS3实现的Loading效果

    原文链接:http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果: 代码如下: <div class="loading"> ...