Ionic Js九：列表操作

列表是一个应用广泛在几乎所有移动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九：列表操作的更多相关文章

ionic js ion-tabs选项卡栏操作
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...
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) ...
15个Node.js项目列表
前言: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascri ...
js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型
js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录操作DOM:文档对象模型 ''' js引入 ...
Ionic Js十一：模态
ionicModal 可以遮住用户主界面的内容框. 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变). <script id=" ...
JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会依次添加到数组的末尾. 该函数属于Array对象,所有主流浏览器均支持该函数. 语法 array.push( ite ...
js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

随机推荐

pandas 实现rfm模型
import pandas as pd import numpy as np df = pd.read_csv('./zue_164466.csv') df['ptdate'] = pd.to_dat ...
js生成接口请求参数签名加密
js生成接口请求参数签名加密定义规则:将所有参数字段按首字母排序, 拼接成key1 = value1 & key2 = value2的格式,再在末尾拼接上key = appSecret, 再 ...
2016-2017-20155329 《Java程序设计》第7周学习总结
学号 2016-2017-20155329 <Java程序设计>第7周学习总结教材学习内容总结时间的度量格林威治标准时间(GMT时间) 世界时(UT) 国际原子时(TAI) 世界协调 ...
20145234黄斐《Java程序设计》第七周
教材学习内容总结第十二章部分 - Lambda 认识Lambda语法 Lambda去可以重复,符合DRY原则,而且Lambda表达式可读性更好,操作更简单匿名类型最大的问题就在于其冗余的语法,la ...
天梯赛 L2-002. （模拟）链表去重
题目链接题目描述给定一个带整数键值的单链表L,本题要求你编写程序,删除那些键值的绝对值有重复的结点.即对任意键值K,只有键值或其绝对值等于K的第一个结点可以被保留.同时,所有被删除的结点必须被保存 ...
HDU 2062 Subset sequence （找规律）
题目链接 Problem Description Consider the aggregate An= { 1, 2, -, n }. For example, A1={1}, A3={1,2,3}. ...
【navicat112_premium】navicat112_premium数据库连接工具安装过程
此工具及其方便,可以连接mysql.oracle.sqlserver登数据库... 1.下载安装包Navicat Premium_11.2.7简体中文版.rar 下载地址:http://qiaoliq ...
java中并发Queue种类与各自API特点以及使用场景!
一先说下队列队列是一种数据结构．它有两个基本操作:在队列尾部加入一个元素,和从队列头部移除一个元素(注意不要弄混队列的头部和尾部) 就是说,队列以一种先进先出的方式管理数据,如果你试图向一个已经 ...
spin_lock & mutex_lock的区别? 【转】
转自:http://blog.csdn.net/wilsonboliu/article/details/19190861 本文由该问题引入到内核锁的讨论,归纳如下为什么需要内核锁? 多核处理器下 ...

Ionic Js九：列表操作

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

随机推荐

热门专题