在 AngularJS 中，ng-options 是一个用于设置 select 元素选项的指令。它可以帮助我们更方便、更简洁地实现 select 元素中的选项设置。本文将详细介绍 ng-options 的用法，并提供一些实例，帮助读者更好地学习和掌握。
ng-options 的基本用法
要使用 ng-options，我们需要将其添加到 select 元素中，并设置相应的选项。下面是基本的语法：
<select ng-model="selectedItem" ng-options="item.id as item.name for item in itemList"> </select>
在上面的语法中，ng-model 用于在控制器中绑定 select 元素的值，ng-options 则用于设置 select 元素中的选项。其中，item.id 和 item.name 分别表示 select 元素中每个选项对应数据的属性名称。而 item in itemList 表示数据来源，也就是我们在控制器中定义的数据列表。
以上语法的效果是将 itemList 数据列表中的每个元素都转化为一个 select 元素中的选项，且每个选项的值为元素的 id，选项的显示名称为元素的 name 属性。当用户在 select 元素中选择一个选项时，该选项的 id 属性值将被赋值给 selectedIterm 变量。
ng-options 的高级用法
除了上面介绍的基本用法，ng-options 还支持更多高级用法，下面是一些例子。
1. 多属性作为选项值
有时候，我们需要将数据列表中多个属性值合成一个字符串作为选项的值。例如，我们有一个员工列表，每个员工有 id、name 和 department 三个属性。我们需要将 id 和 department 组合成一个字符串作为选项的值，用 name 作为选项的显示名称。下面是实现该需求的语法：
<select ng-model="selectedItem" ng-options="item.id + '_' + item.department as item.name for item in employeeList"> </select>
在上面的语法中，ng-options 中的表达式将 id 和 department 属性合并为一个字符串，用 '_' 分隔。该字符串作为选项的值，而 item.name 则作为选项的显示名称。
2. 处理空选项
有时候，我们需要为 select 元素添加一个空选项，用于处理未选择任何选项的情况。例如，在某个表单中，用户需要从一个 select 元素中选择一个国家，但是用户可能会意外忘记选择，这时需要一个空选项。下面是添加空选项的语法：
<select ng-model="selectedCountry" ng-options="country.name as country.name for country in countryList">
<option value="">请选择国家</option>
</select>在上面的语法中，我们添加了一个空选项，其 value 属性为空字符串。当用户未选择任何选项时，selectedCountry 变量的值将为 null。
3. 使用 ng-repeat 添加选项
有时候，我们需要在 select 元素中添加一些选项，这些选项并不在数据列表中，例如动态生成的列表，这时我们可以使用 ng-repeat 指令添加选项。下面是实现该需求的语法：
<select ng-model="selectedItem">
<option ng-repeat="option in optionList" value="{{option.id}}">{{option.name}}</option>
</select>在上面的语法中，我们在 select 元素中使用 ng-repeat 添加 option。其中，optionList 是一个动态生成的列表，option 中的 id 和 name 属性为选项的值和显示名称。
实例分析
下面是两个实例，帮助读者更好地理解 ng-options 的使用。
实例一：学生列表与课程列表
该实例中，我们要实现一个学生选课表单。在表单中，需要显示所有的学生信息和所有的课程信息，供用户选择。当用户选择一个学生和一个课程后，将学生和课程的 id 一起提交给服务器。
编写 HTML 代码
首先，我们来编写 HTML 代码，该代码中，我们将使用 ng-options 指令为 select 元素添加学生和课程选项。
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedStudent" ng-options="stu.id as stu.name for stu in studentList">
</select>
<select ng-model="selectedCourse" ng-options="course.id as course.name for course in courseList">
</select>
<button ng-click="submit()">提交</button>
</body>在上面的 HTML 代码中，我们定义了两个 select 元素，分别用于显示学生和课程选项。同时，我们定义了一个提交按钮，用于提交选中的学生和课程 id。
编写 JavaScript 代码
然后，我们来编写 JavaScript 代码，该代码中，我们将定义 studentList 和 courseList，分别对应所有的学生信息和所有的课程信息，并在 submit() 函数中提交所选的学生和课程 id。
-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ -----------------
-- ----
------------------ - -
---- -- ----- ------
---- -- ----- ------
---- -- ----- -----
--
-- ----
----------------- - -
---- ---- ----- ------
---- ---- ----- ------
---- ---- ----- -----
--
-- ----------
------------- - -----------
--------------------- ------- --- - - ------------------------
--------------------- ------ --- - - -----------------------
-- --------
--
---在上面的 JavaScript 代码中，我们分别定义了 studentList 和 courseList，分别对应所有的学生信息和所有的课程信息。submit() 函数用于提交所选的学生和课程 id，当用户点击提交按钮时，该函数将会在控制台输出所选的学生和课程 id。
实例二：省、市、区级联下拉框选择器
该实例中，我们要实现一个省、市、区级联下拉框选择器。在选择器中，第一级为省份，第二级为城市，第三级为区县。当用户选择一个省份后，该省份下的所有城市将会显示在第二级中，当用户选择一个城市后，该城市下的所有区县将会显示在第三级中。
编写 HTML 代码
首先，我们来编写 HTML 代码，该代码中，我们将使用 ng-options 指令为 select 元素添加省、市、区选项。
-- -------------------- ---- -------
----- -------------- -----------------------
------- --------------------------- ------------------------- --- -------- -- --------------
------- -----------------------
---------
------- ----------------------- --------------------- --- ---- -- ----------
------- -----------------------
---------
------- ----------------------- --------------------- --- ---- -- ----------
------- -----------------------
---------
-------在上面的 HTML 代码中，我们定义了三个 select 元素，分别用于显示省份、城市和区县选项。同时，我们在 select 中都添加了一个空选项，用于处理未选择任何选项的情况。
编写 JavaScript 代码
然后，我们来编写 JavaScript 代码，该代码中，我们将定义 provinceList、cityList 和 areaList 三个数据列表，分别对应所有的省份、城市和区县信息。同时，我们需要在 selectedProvince 变量的值发生变化时，动态更新 cityList 和 areaList。
-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ -----------------
-- ----
------------------- - -
---- -- ----- ------
---- -- ----- ------
---- -- ----- -----
--
-- ----
--------------- - ---
-- ----
--------------- - ---
-- ---------------- -------------- -------- - --------
--------------------------------- ------------------ ----------
-------------
--------------------
---- --
--------------- - -
---- -- ----- ------
--
------
---- --
--------------- - -
---- -- ----- ------
--
------
---- --
--------------- - -
---- -- ----- -------
---- -- ----- ------
--
------
-
------
--------------- - ---
-
--------------- - ---
---
-- ------------ -------------- --------
----------------------------- ------------------ ----------
-------------
--------------------
---- --
--------------- - -
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- ------
--
------
---- --
--------------- - -
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- ------
--
------
---- --
--------------- - -
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- ------
--
------
---- --
--------------- - -
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- ------
--
------
-
------
--------------- - ---
-
---
---在上面的 JavaScript 代码中，我们分别定义了 provinceList、cityList 和 areaList 三个数据列表，分别对应所有的省份、城市和区县信息。同时，我们在 $scope.$watch 中监听 selectedProvince 和 selectedCity 变量的变化，动态更新 cityList 和 areaList。当 selectedProvince 变量的值发生变化时，我们根据 newValue.id 值动态更新 cityList 和 areaList。当 selectedCity 变量的值发生变化时，我们根据 newValue.id 值动态更新 areaList。
结语
本文介绍了 AngularJS 中 ng-options 的基本用法和高级用法，并给出了两个实例。希望本文能够帮助读者更好地学习和掌握 ng-options 指令的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678222ee935627c900f90ec6
