recherche

Maison >interface Web >js tutoriel >Créer une liste en ionique

Créer une liste en ionique

黄舟
黄舟original
2017-02-17 14:10:071268parcourir

1. Fond d'instance

ionic crée une liste dynamique et attribue des valeurs selon AngularJS


2. Code source de mise en œuvre

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ionic之创建列表</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
		<script>
			var app = angular.module("initApp",["ionic"]);
			app.controller("initController",function($scope){
				$scope.users = [
					{username:&#39;赵思思&#39;},
					{username:&#39;梨花胡&#39;},
					{username:&#39;孙丽丽&#39;},
					{username:&#39;胡思思&#39;},
					{username:&#39;孙磊&#39;}
				];
			});
		</script>
		<title></title>
	</head>
	<body ng-app="initApp" ng-controller="initController">
		<ion-side-menus>
			<ion-side-menu-content>
				<ion-header-bar class="bar-dark">
					<span class="title">查询</span>
				</ion-header-bar>
				<ion-content>
					<ion-list>
						<ion-item ng-repeat="user in users">
							{{user.username}}
						</ion-item>
					</ion-list>
				</ion-content>
			</ion-side-menu-content>
			
			<ion-side-menu side="left">
				<ion-header-bar class="bar-dark">
					<label class="title">修改</label>
				</ion-header-bar>
				<ion-content>
					<ion-list>
						<ion-item ng-repeat="user in users">
							{{user.username}}
						</ion-item>
					</ion-list>
				</ion-content>
			</ion-side-menu>
		</ion-side-menus>
	</body>
</html>


3. résultat


(1) Initialisation

Créer une liste en ionique


(2) Menu mobile

Créer une liste en ionique

Ce qui précède est le contenu de la liste de création d'ionic. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：barre lumineuse de style ioniqueArticle suivant：barre lumineuse de style ionique

Articles Liés

Voir plus