ionic list操作

最新推荐文章于 2023-11-10 10:29:59 发布

chenxin90111

最新推荐文章于 2023-11-10 10:29:59 发布

阅读量145

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：https://my.oschina.net/u/3382800/blog/874986

版权

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/ionic.css"/>
    <script src="js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
    <title></title>
</head>
<body>
	<ion-header-bar class="bar-positive" align-title="center">
		<ion-button class="button button-calm icon ion-edit" ng-click="showDelete()"></ion-button>
		<h1 class="title">list操作</h1>
		<ion-button class="button button-caim icon ion-navicon" ng-click="showReorder()"></ion-button>
	</ion-header-bar >
	<ion-content class="has-header has-footer">
		<ion-list show-delete="flag.showDelete" show-reorder="flag.reorder">
			<ion-item ng-repeat="cource in cources">
				<ion-delete-button class="ion-minus-circled" on-tap="deleteItem(cource)"></ion-delete-button>
				{{cource.name}}
				<ion-reorder-button class="icon ion-navicon" on-reorder="moveItem(cource, $fromIndex, $toIndex)" ></ion-reorder-button>
				<ion-option-button class="button-balanced" on-tap="add()">添加</ion-option-button>
				&nbsp;&nbsp;
				<ion-option-button class="button-assertive" on-tap="deleteItem(cource)">删除</ion-option-button>
			</ion-item>
		</ion-list>
	</ion-content>
	<ion-footer-bar class="bar-positive">
	
	</ion-footer-bar>
	<script type="text/javascript">
		var myApp = angular.module("myApp",['ionic']);
		myApp.controller("myController",function ($scope) {
			$scope.cources = [
				{"name":"HTML5"},
				{"name":"CSS3.0"},
				{"name":"JavaScript"},
				{"name":"jQuery"},
				{"name":"BootStrap"},
				{"name":"ionic"},
				{"name":"SASS"},
				{"name":"PHP"},
				{"name":"MySql"},
				{"name":"Node.js"},
				{"name":"angular.js"},
				{"name":"JAVA"},
				{"name":"Gulp"}
			]
			$scope.flag = {
				"showDelete" :false,
				"reorder" :false
			};
			$scope.showDelete = function () {
				$scope.flag.showDelete = !$scope.flag.showDelete;
			};
			$scope.showReorder = function () {
				$scope.flag.reorder = !$scope.flag.reorder;
			};
			$scope.deleteItem = function (cource) {
				var index = $scope.cources.indexOf(cource);
				$scope.cources.splice(index,1);
			};
			$scope.moveItem = function (cource,from,to) {
				$scope.cources.splice(from,1);
				$scope.cources.splice(to,0,cource);
			};
			$scope.add = function () {
				alert("添加");
			}
		})
	</script>
</body>
</html>

转载于:https://my.oschina.net/u/3382800/blog/874986

chenxin90111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic list操作

<!DOCTYPE html><html ng-app="myApp" ng-controller="myController"><head> <meta charset="utf-8"> <meta name="vie...
复制链接

扫一扫