資料結構
網路
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.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 中輕鬆顯示錶格。
更新於： 2023 年 2 月 21 日
2K+ 瀏覽量
廣告