AngularJS 表格：使用 orderBy 和大写筛选器进行排序
詹姆斯·哈特曼
⚡ 智能摘要
AngularJS 表格的排序、顺序和文本格式化都依赖于 ng-repeat 指令以及 filter 表达式。本页展示了如何利用 orderBy、uppercase、filter 和 $index 将普通的 HTML 表格转换为动态的、数据驱动的网格。
表格是处理网页时 HTML 中使用的常见元素之一。
表格 HTML 使用 HTML 标签设计
- 标签——这是用于显示表格的主要标签。
- – 此标签用于分隔表内的行。
- – 此标签用于显示实际的表格数据。
- – 用于表头数据。
使用上述可用的 HTML 标签以及 AngularJS，我们可以更轻松地填充表格数据。简而言之，ng-repeat 指令用于填充表格数据。
本章我们将探讨如何实现这一点。我们还将学习如何使用 orderBy 和 uppercase 过滤器，以及如何使用 $index 属性来显示 AngularJS 表格索引。第一步是编写标记本身。
在表中填充并显示数据
正如我们在本章介绍中所讨论的，在 HTML 页面中创建表格结构的基础保持不变。
表格的结构仍然使用普通的 HTML 标签创建， ，和。但是，数据是使用 AngularJS 中的 ng-repeat 指令填充的。
让我们来看一个简单的例子，了解如何实现 AngularJS 表格。
在这个例子中，
我们将创建一个 AngularJS 表格，其中包含课程主题及其描述。
步骤1） 我们首先要在 HTML 页面中添加“style”标签，以便表格能够显示为正确的表格。
- 样式标签已添加到 HTML 页面。这是添加 HTML 元素所需的任何格式属性的标准方法。
- 我们正在向表中添加两种样式值。
- 一是我们的AngularJS表格应该有实线边框；
- 其次，应该为我们的 AngularJS 表格数据添加内边距。
步骤2） 下一步是编写代码来生成表及其数据。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
⚠️警告： 此列表与出版内容完全一致，但其中有四行错误。 chrset 拼写错误 charset同时加载了三个 AngularJS 构建版本，这太多了。 lib/bootstrap.js 和 lib/bootstrap.css 不存在。保留 angular.min.js 只。
Code 说明
- 我们首先创建一个名为“tutorial”的变量，并一次性为其分配一些键值对。显示表格时，每个键值对都将用作数据。然后将 tutorial 变量分配给范围对象，以便可以从我们的视图中访问它。
- 这是创建表的第一步，我们使用标签。
- 对于每一行数据，我们都使用“ng-repeat 指令”。该指令使用变量 ptutor 遍历教程范围对象中的每个键值对。
- 最后，我们使用标签以及键值对（ptutor.Name 和 ptutor.Descript使用 ion) 显示 AngularJS 表格数据。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
从上面的输出来看，
- 我们可以看到表格使用控制器中定义的键值对数组中的数据正确显示。
- 通过使用“ng-repeat 指令”遍历每个键值对来生成表数据。
原始数据行只是起点，因为过滤器决定了这些行的排序和格式。
AngularJS 内置过滤器
使用 AngularJS 中的内置过滤器来更改数据在表中的显示方式非常常见。我们已经在前面的章节中看到了过滤器的实际作用。在继续之前，让我们快速回顾一下过滤器。
在 AngularJS 中，过滤器用于在将表达式的值显示给用户之前对其进行格式化。例如，“uppercase”过滤器会接收一个字符串输出，并将该字符串格式化，使其所有字符都以大写形式显示。
因此，在下面的例子中，如果变量“TutorialName”的值为“AngularJS”，则以下表达式的输出将是“ANGULARJS”。
{{ TutorialName | uppercase }}
在本节中，我们将更详细地了解如何在表中使用 orderBy 和大写过滤器。
表格中常用的 AngularJS 过滤器
下表比较了 ng-repeat 表达式中最常用的过滤器。
| 筛选 | 目的 | 例如： |
|---|---|---|
| orderBy | 按键对行进行排序 | | orderBy : 'Name' |
| 过滤 | 保持匹配行 | | filter : searchText |
| 大写 | 将文本大写 | | uppercase |
| 小写 | 降低文本 | | lowercase |
| 限制 | 大写行计数 | | limitTo : 25 |
| currency | 货币格式 | | currency : '$' |
| 日期 | 日期格式 | | date : 'dd MMM yyyy' |
| 数 | 设置小数 | | number : 2 |
排序是读者首先要求的筛选条件，因此排序筛选条件紧随其后。
使用 OrderBy 筛选器对表进行排序
此筛选器用于根据表格中的某一列对表格进行排序。在前面的示例中，AngularJS 表格数据的输出如下所示。
| 控制器 | 控制器运行情况 |
| 型号 | 模型和绑定数据 |
| 指令 | 指令的灵活性 |
让我们来看一个例子，了解如何使用“orderBy”过滤器，并根据表格中的第一列对AngularJS表格数据进行排序。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 说明
- 我们使用的代码与创建表格时的代码相同，唯一的不同是这次我们使用了“orderBy”过滤器和 ng-repeat 指令。在本例中，我们表示我们希望按键“Name”对表格进行排序。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
从输出来看，
- 我们可以看到，AngularJS 表格中的数据已根据第一列的数据进行了排序。数组的声明顺序为 Controllers、Models、Directives，因此如果没有筛选条件，行将按此顺序显示。应用
orderBy : 'Name'按字母顺序排列名称值，将指令移到模型之前，生成控制器、指令、模型。
排序 Reverse 以及来自列标题
orderBy 过滤器接受第二个参数。传递 true 反转方向，并将键和该标志都存储在作用域中，允许读者通过单击标题重新对表格进行排序，因为 按引用排序 描述。
<table> <tr> <th ng-click="sortKey='Name'; reverse=!reverse">Name</th> <th ng-click="sortKey='Description'; reverse=!reverse">Description</th> </tr> <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table>
排序会改变行的顺序。下一个筛选条件会改变单个列的读取方式。
显示带大写字母过滤器的表格
我们还可以使用大写过滤器将 AngularJS 表格中的数据更改为大写。
让我们看一个例子来了解如何实现这一点。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name | uppercase}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 说明
- 我们使用的代码与创建表格时的代码相同，唯一的不同是这次我们使用了大写过滤器。我们将此过滤器与“ptutor.Name”结合使用，以便第一列中的所有文本都以大写形式显示。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
从输出来看，
- 我们可以看到，通过使用“大写”过滤器，第一列中的所有数据都以大写字母显示。
格式化列很有用，读者通常希望在列旁边显示行号。
显示表索引 ($index)
要显示表索引，请添加与 $index。
让我们看一个例子来了解如何实现这一点。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{$index + 1}}</td> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 说明
- 我们使用与创建表相同的代码，唯一的区别是这次我们在表中添加了一个额外的行来显示索引列。在此附加列中，我们使用 AngularJS 提供的“$index”属性，然后使用 +1 运算符来增加每行的索引。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出
从输出来看，
- 可以看到又创建了一个列，在这个列中我们可以看到为每一行创建的索引。
一屏只能显示三行数据。但实际的数据集无法做到这一点，因此读者需要一种方法来搜索它。
如何筛选和搜索 AngularJS 表格数据
AngularJS 提供了一个名为“过滤器”的组件 filter它放在 `ng-repeat` 之后，会将数组中的每个元素与一个值进行比较，并仅保留匹配的行。将该值绑定到使用 `ng-model` 的文本框，表格会在读者输入时自动缩小，无需事件处理程序或控制器代码。
添加实时搜索 Box
在表格上方添加一个输入框，并将数组传递给过滤器。这两个输入框共享同一个作用域属性，因此 AngularJS 会在每次按键时重新计算表达式。
<input type="text" ng-model="searchText" placeholder="Search topics"> <table> <tr ng-repeat="ptutor in tutorial | filter : searchText"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table>
Code 说明：
- 输入框会将输入的内容写入数据中。
searchText在范围内。 filter : searchText保留名称或 Description 包含该子字符串，忽略大小写。- 要搜索单个列，请传递一个对象：
filter : {Name : searchText}. - 过滤器链，所以
| filter : searchText | orderBy : 'Name'先进行搜索，然后对幸存者进行排序。
保持大表格响应式
在使用 AngularJS 表格进行开发时，经常会遇到一个问题：数据集非常大，包含上千行数据。 ng-重复 指令会为每一行创建一个作用域和一个监视器，因此页面可能会停止响应。请将行分散到多个页面上，并添加 track by 因此，现有行将被重用，而不是重新构建。
<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">
