AngularJS 表：排序、OrderBy 和大写过滤器 [示例]

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

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

标签——这是用于显示表格的主要标签。
– 此标签用于分隔表内的行。
– 此标签用于显示实际的表格数据。
– 用于表头数据。

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

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

在表中填充并显示数据

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

表格的结构仍然使用普通的 HTML 标签创建，，和。但是，数据是使用 AngularJS 中的 ng-repeat 指令填充的。
让我们看一个如何实现 Angular 表的简单示例。
在这个例子中，

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

步骤1） 我们首先要在 HTML 页面中添加“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 变量分配给范围对象，以便可以从我们的视图中访问它。
这是创建表的第一步，我们使用标签。
对于每一行数据，我们都使用“ng-repeat 指令”。该指令使用变量 ptutor 遍历教程范围对象中的每个键值对。
最后，我们使用标签以及键值对（ptutor.Name 和 ptutor.Description）来显示 Angular 表数据。

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

输出

从上面的输出来看，

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

AngularJS 内置过滤器

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

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

因此，在下面的例子中，如果变量“TutorialName”的值为“AngularJS”，则以下表达式的输出将是“ANGULARJS”。

在本节中，我们将更详细地了解如何在表中使用 orderBy 和大写过滤器。

使用 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 表中的数据已根据第一列中的数据进行排序。在我们的数据集中，“指令”数据来自“模型”数据，但由于我们应用了 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">
            <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>

代码说明

我们使用的代码与创建表格时的代码相同，唯一的不同是这次我们使用了大写过滤器。我们将此过滤器与“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>

代码说明

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

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

输出

从输出来看，

可以看到又创建了一个列，在这个列中我们可以看到为每一行创建的索引。

总结

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

你可能会喜欢：

在表中填充并显示数据

代码说明

输出

相关文章

AngularJS 内置过滤器

使用 OrderBy 筛选器对表进行排序

代码说明

输出

显示带大写字母过滤器的表格

代码说明

输出

显示表索引 ($index)

代码说明

输出

总结