简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

AngularJS table

黄舟
Release： 2017-02-18 13:20:12
Original
1012 people have browsed it

1. Problem background

Design a table, the style is determined by Bootstrap, and the data is determined by AngularJS


2. Implementation source code

<!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>
Copy after login


3. Implementation Result



## above This is the content of the AngularJS table. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



Related labels：
AngularJS，表格，JavaScript
source：php.cn
Previous article：File upload and display of uploaded files Next article：zTree click text to check the checkbox
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to make table cell values ​​hyperlinked in Dash? (Using Plotly, Dash, Pandas, etc.) I want to set the cell value under the "JobLink" column as a hyperlink. When I c...
From 2023-11-17 18:47:10
0
1
283
How to get the RGB value of CSS/HTML named color in JavaScript I have created a Javascript object called [name-rgb]. Your basic:namedColors={AliceBlue:[2...
From 2023-11-06 09:05:50
0
2
210
How to copy Excel FV function in PHP? I'm converting some fairly complex calculations from an Excel spreadsheet to PHP. I'm stuc...
From 2023-11-04 15:54:09
0
1
254
Convert .HEIC to .JPG using ImageMagick in PHP I'm hoping to try and create a small image converter that converts HEIC files uploaded to ...
From 2023-11-02 17:38:57
0
1
264
Vue.js 3 v-for causes issues with Tailwind/Flowbite modal functionality I am trying to call tailwind pattern from a table where the rows are generated using v-for...
From 2023-11-02 13:36:09
0
1
300
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！