当前位置:Gxlcms > JavaScript > AngularJS之表格

AngularJS之表格

时间:2021-07-01 10:21:17 帮助过:2人阅读

1、问题背景

设计一个表格,样式由Bootstrap决定的,数据由AngularJS来决定的


2、实现源码

<!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、实现结果



以上就是AngularJS之表格的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行