Maison > Article > interface Web > Tableau AngularJS

Tableau AngularJS

黄舟original: 2017-02-18 13:20:121055parcourir

1. Contexte du problème

Concevez une table, le style est déterminé par Bootstrap et les données sont déterminées par AngularJS

2. Code source d'implémentation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之表格</title>
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("tableApp",[]);
			app.controller("tableCon",function($scope){
				$scope.datas = [
					{name:"张三",age:"23"},
					{name:"李斯",age:"22"},
					{name:"王五",age:"21"},
					{name:"赵倩",age:"24"},
					{name:"五月",age:"25"}
				]
			});
		</script>
	</head>
	<body>
		<p ng-app="tableApp" ng-controller="tableCon">
			<table class="table table-bordereds" style="text-align: center;">
				<thead>
					<tr>
						<th style="text-align: center;">姓名</th>
						<th style="text-align: center;">年龄</th>
					</tr>
				</thead>
				<tr ng-repeat="data in datas">
					<td>{{data.name}}</td>
					<td>{{data.age}}</td>
				</tr>
			</table>
		</p>
	</body>
</html>

3 , obtenir des résultats

Ce qui précède est le contenu de la table AngularJS. 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：Téléchargement de fichiers et affichage des fichiers téléchargésArticle suivant：Téléchargement de fichiers et affichage des fichiers téléchargés

Articles Liés

Voir plus