前言
在前端开发中，有很多情况下需要对表格进行排序，比如按照日期，按照姓名等等。为了方便实现这一过程，我们可以使用一个 npm 包，名叫 angular-table-sort。
本篇文章将会详细地介绍如何使用这个 npm 包，在使用过程中会给出详细的示例代码，并且会对其原理进行解释。
安装
使用 npm 安装 angular-table-sort 是非常简单的，只需要在命令行中输入以下指令即可：
npm install angular-table-sort --save
使用
- 引入模块
在需要使用的 AngularJS 模块中引入 angular-table-sort 模块。
var app = angular.module('myApp', ['angularTableSort']);- 配置
在 HTML 中配置表格的 Metadata 和默认排序方式。
-- -------------------- ---- -------
-------
-------
----
--- ------------- -------------------------
--- ------------- -----------------------
--- ------------- -----------------------------
-----
--------
-------
--- --------------- -- ----- - ----------------------------
------ --------- -------
------ -------- -------
------ ----------- -------
-----
--------
--------这里我们使用了一个名为 sortFields 的变量，它是一个数组类型，用于存储排序的顺序。
$scope.sortFields = ['name'];
- 排序
在控制器中，我们需要处理用户点击表头时的事件。
-- -------------------- ---- -------
------------- - -------- ----------- -
--- ----- - -------------------------------------
-- ------ - -- -
-------------------------------------
- ---- -
-- ------ --- -- -
--------------------------- ---
-
-
--这里的 sortField 参数就是表头对应的 key 值。我们需要根据其顺序来进行排序，如果当前表头已经排序过了，则翻转排序顺序。
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------------------- ------------
------- --------------------------------------------------------------------------------------
------- ----------------------------------------------
-------
----- -----------------------
-------
-------
----
--- ------------- --------------- -----------------------------------
--- ------------- -------------- ---------------------------------
--- ------------- ----------------- ---------------------------------------
-----
--------
-------
--- --------------- -- ----- - ----------------------------
------ --------- -------
------ -------- -------
------ ----------- -------
-----
--------
--------
--------
----------------------- ---------------------
--------------------- ---------- -------- -------- -
------------ - -
------ ------ ---- --- ------- --------
------ -------- ---- --- ------- --------
------ -------- ---- --- ------- ----------
------ ------ ---- --- ------- --------
------ -------- ---- --- ------- --------
--
----------------- - -------- ------ ----------- -- ------
------------- - -------- ----------- -
--- ----- - -------------------------------------
-- ------ - -- -
-------------------------------------
- ---- -
-- ------ --- -- -
--------------------------- ---
- ---- -
------------------------------- ---
-
-
-
----
---------
-------
-------结语
本文介绍了如何简单易用地使用 angular-table-sort 这个 npm 包实现 AngularJS 表格的排序。希望本文对你有所启发和帮助。如果你对 AngularJS 技术感兴趣，可以继续关注我们的博客，我们会不断地为大家带来更多优质的技术文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664681e8991b448e259c