AngularJS是一种流行的前端框架，其中orderby指令用于对数组进行排序。然而，在使用此指令时，可能遇到一个问题：在字段为空时如何排序？本文将介绍如何解决此问题。
问题描述
假设有一个人员列表，其中包含姓名和年龄，如下所示：
$scope.people = [
{ name: 'John', age: 30 },
{ name: 'Mary', age: null },
{ name: 'Peter', age: 20 }
];如果我们想按照年龄排序，则可以使用以下代码：
<ul>
<li ng-repeat="person in people | orderBy:'age'">
{{person.name}} ({{person.age}})
</li>
</ul>然而，当有一个或多个人的年龄为空时，上述代码就会出现问题。
解决方案
要解决这个问题，我们需要自定义一个排序函数，并在其中处理空值。
-- -------------------- ---- -------
-------------------------- - ---------------- --------- -
-- --------- -
------ --
- ---- -- ----------- -
------ ---
- ---- -
------ ------- - -------- - -- - ---
-
--这个函数首先检查实际值是否为空。如果是，那么它将返回1，表示实际值应该排在期望值之后。反之，如果期望值为空，则返回-1，表示实际值应该排在期望值之前。否则，它将返回两者之间的比较结果。
我们可以在orderBy指令中使用这个函数：
<ul>
<li ng-repeat="person in people | orderBy:'age':nullsLastComparator">
{{person.name}} ({{person.age}})
</li>
</ul>现在，即使有一个或多个人的年龄为空，也可以正确排序了。
深入学习
除了处理空值之外，我们还可以进一步探索AngularJS orderby指令的各种用法和选项。例如，我们可以通过附加反向参数来反转排序顺序，或者使用一个复杂的表达式来进行更高级的排序。
指导意义
在处理空字段的情况下，自定义排序函数是一种非常有用的技巧。此外，当遇到其他类似的问题时，我们也可以使用类似的方法来解决它们。最重要的是，我们应该始终保持好奇心，并研究如何更好地利用AngularJS及其各种指令和功能。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------- - -
- ----- ------- ---- -- --
- ----- ------- ---- ---- --
- ----- -------- ---- -- -
--
-------------------------- - ---------------- --------- -
-- --------- -
------ --
- ---- -- ----------- -
------ ---
- ---- -
------ ------- - -------- - -- - ---
-
--
----- -------------------- ---- -------
--------- -----
------
------
------- ------------------------------------------------------------------------------------
-------
------
---- -------------- -----------------------
----
--- ----------------- -- ------ - -----------------------------------
--------------- ----------------
-----
-----
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29797