AngularJS - 表格：初學者的指南

你好，未來的編程超級巨星！我很高興能成為您進入AngularJS表格世界的引路人。作為一個教了多年編程的人，我可以向您保證，表格不再只是用於電子表格——它們是網頁開發的關鍵部分。所以，讓我們一起潛入水中，創造一些表格魔法吧！

AngularJS - Tables

AngularJS 表格是什麼？

在我們開始到處創建表格之前，讓我們先了解AngularJS表格到底是什麼。實質上，AngularJS表格是動態的、數據驅動的結構，讓我們能夠以整齊、有組織的方式顯示和操作信息。把它們想象成在您的網頁上運行的超強Excel工作表！

為什麼使用AngularJS 表格？

你可能會想，"既然HTML表格已經存在，為什麼還要麻煩使用AngularJS表格呢？" 好奇的朋友，AngularJS表格提供了一些出色的優勢：

動態數據綁定
易於排序和過濾
分頁
响應式設計

現在我們已經引起了您的興趣，讓我們挽起袖子開始編程吧！

創建您的第一個AngularJS 表格

步驟 1：設置您的 HTML

首先，我們需要創建一個基本的HTML結構。別擔心，這比組裝宜家家具要簡單多了！

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一個AngularJS 表格</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<table>
<tr>
<th>名稱</th>
<th>年齡</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>
<script src="app.js"></script>
</body>
</html>

這個HTML設置了一個基本的表格結構。魔法在於ng-repeat="person in people"。這個指令告訴AngularJS為我們的people數組中的每個項目重複<tr>。

步驟 2：創建您的AngularJS 應用程序

現在，讓我們用一些AngularJS魔法為我們的表格注入生命。創建一個名為app.js的文件，並添加以下代碼：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.people = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
];
});

這段代碼創建了一個AngularJS模塊和一個控制器。控制器定義了一個人數組，每個人都有一個名稱和年齡。這些數據將填充我們的表格。

增強您的表格

添加排序功能

讓我們通過添加排序功能使我們的表格更具互動性。更新您的HTML如下：

<table>
<tr>
<th ng-click="sortBy('name')">名稱</th>
<th ng-click="sortBy('age')">年齡</th>
</tr>
<tr ng-repeat="person in people | orderBy:sortColumn:reverseSort">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</table>

現在，更新您的app.js：

app.controller('myCtrl', function($scope) {
$scope.people = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 30},
{name: 'Charlie', age: 35}
];

$scope.sortColumn = 'name';
$scope.reverseSort = false;

$scope.sortBy = function(columnName) {
if ($scope.sortColumn == columnName) {
$scope.reverseSort = !$scope.reverseSort;
} else {
$scope.sortColumn = columnName;
$scope.reverseSort = false;
}
};
});

這段代碼為您的表格添加了排序功能。點擊列標題將按該列排序表格。

添加搜索功能

讓我們添加一個搜索框來過濾我們的表格。在表格上方添加以下內容到您的HTML：

<input type="text" ng-model="searchText" placeholder="搜索...">

然後，更新您的表格的ng-repeat指令：

<tr ng-repeat="person in people | filter:searchText | orderBy:sortColumn:reverseSort">

這讓用戶能夠實時搜索表格數據。很酷吧？

AngularJS 表格的力量

現在我們已經創建了一個具有排序和搜索功能的基礎表格，讓我們花一會兒時間欣賞我們所取得的成就。僅僅幾行代碼，我們就創建了一個動態、交互式的表格，如果只用普通的HTML和JavaScript，將需要付出更多的努力。

以下是我們使用過的AngularJS表格方法摘要：

方法	描述
ng-repeat	為數組中的每個項目重複一塊HTML
orderBy	按特定鍵排序數組
filter	根據搜索條件過濾數組

結論

恭喜您！您已經踏出了進入AngularJS表格世界的第一步。我們已經涵蓋了創建表格、添加數據、實現排序甚至添加搜索功能的基本知識。但這只是冰山一角！

記住，精通AngularJS表格就像學習烹飪一樣——需要練習、嘗試，並可能在過程中犯一些錯誤。但只要堅持不懈，您很快就會烹飪出複雜的數據豐富的網頁應用程序。

那麼，還等什麼呢？開始嘗試您新學到的AngularJS表格技能吧。誰知道呢？下一個大型數據驅動的網頁應用程序可能只差幾個表格！

祝您編程愉快，願您的表格永遠完美對齊！

Credits: Image by storyset