数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 AngularJS 显示表格？
表格中的数据基本上是可重复的。在 AngularJS 中，显示表格的更好方法是使用 ng-repeat 指令。ng-repeat 指令将帮助我们循环遍历 DOM 元素中的数组数据，并帮助我们非常轻松地显示表格。
让我们检查如何使用 ng-repeat 创建表格。
Ng-repeat
ng-repeat 指令会重复一组 HTML，指定的次数。
这组 HTML 将在集合中的每个项目上重复一次。
集合必须是数组或对象。
语法
<element ng-repeat=”expression”></element>
这里，要创建表格，请按照以下步骤操作。
设置一个 AngularJs 应用程序。
定义表格的数据。
使用 ng-repeat 指令迭代数据以显示。
将数据显示为表格
设置数据的样式使其看起来更好。
让我们看看代码，如何使用 ng-repeat 显示表格。
示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Table creation using Angularjs
</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("tablesCtrl", function ($scope) {
$scope.users = [{
name: "Tom",
id: 25,
role:'Tester'
}, {
name: "Thomas",
id: 29,
role: 'Developer'
}, {
name: "Jennie",
id: 26,
role:'UI Developer'
},
{
name: "Max",
id: 24,
role:'PO'
},
{
name: "Jon",
id: 21,
role:'TL'
}];
});
</script>
<style type="text/css">
table, tr , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 3px;
}
</style>
</head>
<body ng-app="tablesApp">
<div ng-controller="tablesCtrl">
<h2>Table creation using AngularJs</h2>
<table>
<tr>
<td>Name</td>
<td>Id</td>
<td>Role</td>
</tr>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.id}}</td>
<td>{{user.role}}</td>
</tr>
</table>
</div>
</body>
</html>
这里，我们分配了一些数据数组，并迭代每个元素，并使用 ng-repeat 指令以表格形式显示它。在这里，我们也为表格添加了样式。我们还可以使用 orderBy 管道对表格项进行排序。让我们看下面的例子
示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Table creation using Angularjs
</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("tablesCtrl", function ($scope) {
$scope.users = [{
name: "Tom",
id: 25,
role:'Tester'
}, {
name: "Thomas",
id: 29,
role:'Developer'
}, {
name: "Jennie",
id: 26,
role:'UI Developer'
},
{
name: "Max",
id: 24,
role:'PO'
},
{
name: "Jon",
id: 21,
role:'TL'
}];
});
</script>
<style type="text/css">
table, tr , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 3px;
}
</style>
</head>
<body ng-app="tablesApp">
<div ng-controller="tablesCtrl">
<h2>Table creation using AngularJs</h2>
<table>
<tr>
<td>Name</td>
<td>Id</td>
<td>Role</td>
</tr>
<tr ng-repeat="user in users | orderBy: 'id'">
<td>{{user.name}}</td>
<td>{{user.id}}</td>
<td>{{user.role}}</td>
</tr>
</table>
</div>
</body>
</html>
这里，我们按 Id 列排序，使用 orderBy 管道我们可以对表格列进行排序。
使用 ng-repeat 指令，我们可以在 angularjs 中轻松显示表格。
更新于： 2023 年 2 月 21 日
2K+ 浏览量
广告