在AngularJS中，ngOptions指令提供了一种方便的方式来创建选择框。但是，在某些情况下，您可能需要对选项进行分组并按组名和选项标签进行排序。本文将介绍如何使用ngOptions进行此操作，并提供示例代码和详细说明。
按组名和标签排序
默认情况下，ngOptions创建的选项按照数组中的顺序进行排序。但是，当您需要对选项进行分组并按组名和选项标签进行排序时，ngOptions提供了一个称为group by的选项。例如，假设我们有以下数据：
$scope.countries = [
{ name: 'USA', continent: 'North America' },
{ name: 'Canada', continent: 'North America' },
{ name: 'Mexico', continent: 'North America' },
{ name: 'Japan', continent: 'Asia' },
{ name: 'China', continent: 'Asia' },
{ name: 'India', continent: 'Asia' }
];如果我们想要将这些国家按所属的大洲进行分组并按大洲名称和国家名称进行排序，我们可以在ngOptions中使用以下语法：
<select ng-model="selectedCountry"
ng-options="country.name group by country.continent for country in countries | orderBy:['continent', 'name']">
<option value="">Select a country</option>
</select>在这个例子中，我们使用group by选项将选项按大洲名称分组。然后，我们使用orderBy过滤器将选项按continent和name属性进行排序。最终，生成的HTML代码如下所示：
-- -------------------- ---- -------
------- ---------------------------
------- --------------- - ----------------
--------- -------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
-----------
--------- ------------ ---------
------- ------------------------------
------- ------------------------------
------- ------------------------
-----------
---------在这个HTML代码中，我们可以看到，选项已经被正确地按大洲名称和国家名称进行了排序，并且每个选项都包含在一个optgroup元素中。
示例代码
以下是完整的示例代码，可用于演示如何使用ngOptions对选项进行分组并按组名和选项标签进行排序：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- - ---------- --- -- ----- -- ----- ---- --- ---- -- -------------
-------
----- -----------------------------
------- --------------------------
------------------------ ----- -- ----------------- --- ------- -- --------- - --------------------- ---------
------- --------------- - ----------------
---------
------- ------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------------ ---------------- -
---------------- - -
- ----- ------ ---------- ------ -------- --
- ----- --------- ---------- ------ -------- --
- ----- --------- ---------- ------ -------- --
- ----- -------- ---------- ------ --
- ----- -------- ---------- ------ --
- ----- -------- ---------- ------ -
--
---
---------
-------
-------在这个示例代码中，我们首先定义了一个AngularJS应用程序和一个控制器。然后，我们在HTML代码中使用ngOptions指令来创建选择框，并将数据绑定到$scope对象中的countries数组。最后，我们使用orderBy过滤
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30084