ionic 列表操作

ionic

ionic 教程 ionic 安装 ionic 创建 APP ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic Toggle(切换开关) ionic checkbox（复选框） ionic 单选框 ionic Range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic icon(图标) ionic 上拉菜单(ActionSheet) ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模态窗口 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

ionic 列表操作

列表是一个应用广泛在几乎所有移动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">

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

API

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄定义带有`$ionicListDelegate`的列表。
show-delete (可选)	`布尔值`	列表项的删除按钮当前是显示还是隐藏。
show-reorder (可选)	`布尔值`	列表项的排序按钮当前是显示还是隐藏。
can-swipe (可选)	`布尔值`	列表项是否被允许滑动显示选项按钮。默认：true。

实例

HTML 代码：

<head>

<title>Ionic List Directive</title>

</head>

<ion-header-bar class="bar-positive">

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

Reorder

</button>

</div>

</ion-header-bar>

<ion-content>

<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)">

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

1
2
3

body {

cursor: url('http://www.web3.xin/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 头部和底部

下一篇:ionic 加载动作

我要发贴

ionic