Maison > Article > interface Web > liste ionique non ordonnée

liste ionique non ordonnée

黄舟original: 2017-02-16 14:15:081079parcourir

1. Exemple d'arrière-plan

La liste non ordonnée ionique est implémentée à l'aide de ul-li, le contenu de la liste non ordonnée est attribué par AngularJS et le style est class=" list "et class="item"

2. Code source d'implémentation

<!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/angular/angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
		<script>
			var app = angular.module("ulApp",["ionic"]);
			app.controller("ulController",function($scope){
				$scope.uls = ["春季","夏季","秋季","冬季"];
			});
		</script>
	</head>
	<body ng-app="ulApp" ng-controller="ulController">
		<p style="padding: 100px;">
			<ul class="list">
				<li class="item" ng-repeat="u in uls">{{u}}</li>
			</ul>
		</p>
	</body>
</html>

3. Résultats de réalisation

liste ionique non ordonnée

Ce qui précède est le contenu de la liste ionique, non ordonnée et de JavaScript. 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：case à cocher de style ioniqueArticle suivant：case à cocher de style ionique

Articles Liés

Voir plus