AngularJS 表格：排序、OrderBy 和 Uppercase 过滤器 [示例]

表格是处理网页时 HTML 中常用的元素之一。

HTML 中的表格使用 HTML 标签设计

<table> 标签 – 这是用于显示表格的主标签。
<tr> – 此标签用于分隔表格中的行。
<td> – 此标签用于显示实际的表格数据。
<th> – 这用于表格的标题数据。

使用上述可用的 HTML 标签以及 AngularJS，我们可以更轻松地填充表格数据。简而言之，ng-repeat 指令用于填充表格数据。

在本章中，我们将研究如何实现这一点。我们还将研究如何使用 orderby 和 uppercase 过滤器，以及使用 $index 属性来显示 Angular 表格索引。

填充和显示表格数据

正如我们在本章引言中所讨论的，在 HTML 页面中创建表格结构的基础保持不变。

表格结构仍然使用标准的 HTML 标签 <table>、<tr>、<td> 和 <th> 创建。然而，数据是通过使用 AngularJS 中的 ng-repeat 指令来填充的。
让我们来看一个关于如何实现 Angular 表格的简单示例。
在此示例中，

我们将创建一个 Angular 表格，其中包含课程主题及其描述。

步骤 1) 我们将首先在 HTML 页面中添加一个“style”标签，以便表格可以显示为标准的表格。

style 标签已添加到 HTML 页面。这是为 HTML 元素添加任何所需格式属性的标准方法。
我们为表格添加了两个样式值。

一是我们的 Angular 表格应具有实线边框，
二是为我们的 Angular 表格数据设置内边距。

步骤 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>

代码解释

我们首先创建一个名为“tutorial”的变量，并在一个步骤中为其分配一些键值对。每个键值对将用作显示表格的数据。然后将 tutorial 变量分配给 scope 对象，以便可以从我们的视图访问它。
这是创建表格的第一步，我们使用 <table> 标签。
对于每一行数据，我们使用“ng-repeat 指令”。此指令通过变量 ptutor 遍历 tutorial scope 对象中的每个键值对。
最后，我们使用 <td> 标签以及键值对（ptutor.Name 和 ptutor.Description）来显示 Angular 表格数据。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从上面的输出，

我们可以看到表格已正确显示，其中包含控制器中定义的键值对数组中的数据。
表格数据是通过使用“ng-repeat 指令”遍历每个键值对生成的。

AngularJS 内置过滤器

在 AngularJS 中使用内置过滤器来更改表格中数据的显示方式非常普遍。我们已经在前面的章节中看到了过滤器的实际应用。在我们继续前进之前，让我们快速回顾一下过滤器。

在 Angular.JS 中，过滤器用于在将表达式的值显示给用户之前对其进行格式化。过滤器的一个例子是‘uppercase’过滤器，它接受字符串输出并格式化字符串，并将字符串中的所有字符显示为大写。

因此，在下面的示例中，如果变量‘TutorialName’的值是‘AngularJS’，则以下表达式的输出将是‘ANGULARJS’。

在本节中，我们将更详细地探讨如何在表格中使用 orderBy 和 uppercase 过滤器。

使用 OrderBy 过滤器对表格进行排序

此过滤器用于根据表格的一列对表格进行排序。在前面的示例中，我们的 Angular 表格数据的输出如下所示。

控制器	控制器实操
模型	模型和绑定数据
指令	指令的灵活性

让我们来看一个示例，说明如何使用“orderBy”过滤器并使用表格的第一列对 Angular 表格数据进行排序。

<!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>

代码解释

我们使用的是与创建表格相同的代码，这次唯一不同的是我们正在将“orderBy”过滤器与 ng-repeat 指令一起使用。在这种情况下，我们指定我们要按“Name”键对表格进行排序。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

我们可以看到 Angular 表格中的数据已根据第一列中的数据进行了排序。在我们的数据集中，“Directives”数据来自“Models”数据，但由于我们应用了 orderBy 过滤器，因此表格会相应地进行排序。

使用 Uppercase 过滤器显示表格

我们还可以使用 uppercase 过滤器将 Angular 表格中的数据转换为大写。

让我们来看一个如何实现这一点的示例。

<!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>

代码解释

我们使用的是与创建表格相同的代码，这次唯一不同的是我们正在使用 uppercase 过滤器。我们正在将其与“ptutor.Name”结合使用，以便第一列中的所有文本都将显示为大写。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

我们可以看到，通过使用“uppercase”过滤器，第一列中的所有数据都显示为大写字符。

显示表格索引 ($index)

要显示表格索引，请添加一个带有 $index 的 <td>。

让我们来看一个如何实现这一点的示例。

<!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>

代码解释

我们使用的是与创建表格相同的代码，这次唯一不同的是我们正在为表格添加一个额外的行来显示索引列。在此附加列中，我们正在使用 AngularJS 提供的“$index”属性，然后使用 +1 运算符为每一行递增索引。

如果代码成功执行，在浏览器中运行代码时将显示以下输出。

输出

从输出中，

您可以看到已创建了一个附加列。在此列中，我们可以看到为每一行创建的索引。

摘要

表格结构使用 HTML 中提供的标准标签创建。表格中的数据使用“ng-repeat”指令填充。
orderBy 过滤器可用于根据表格中的任何列对表格进行排序。
uppercase 过滤器可用于将任何基于文本的列中的数据显示为大写。
“$index”属性可用于为表格创建索引。
使用 AngularJS.JS 表格开发时遇到的一项常见问题是处理大型数据集，其中包含 1000 多行数据。有时 ng-repeat 指令可能会变得无响应，因此有时整个页面都会变得无响应。在这种情况下，最好使用分页，其中数据行分布在多个页面上。

填充和显示表格数据

代码解释

输出

相关文章

AngularJS 内置过滤器

使用 OrderBy 过滤器对表格进行排序

代码解释

输出

使用 Uppercase 过滤器显示表格

代码解释

输出

显示表格索引 ($index)

代码解释

输出

摘要

订阅新闻通讯