如何使用 AngularJS 显示表格?
angularjsweb developmentfront end technology
表格中的数据基本上是可重复的。在 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.com/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.com/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 中轻松显示表格。
