communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Créer une liste en ionique

Créer une liste en ionique

黄舟
Libérer： 2017-02-17 14:10:07
original
1271 Les gens l'ont consulté

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>
Copier après la connexion


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


Étiquettes associées：
ionic
source：php.cn
Article précédent：barre lumineuse de style ionique Article suivant：Exemple simple d'ionique
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2052
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2207
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1862
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1749
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1772
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal