下拉选择列表是前端表单中常用的控件，我们可以通过 AngularJS 从 JSON 数据源动态地填充这个控件。本文将详细介绍如何使用 AngularJS 实现这一功能，并提供示例代码和指导意义。
步骤
- 创建一个基本的 HTML 页面，并引入 AngularJS 库。
--------- -----
------
------
--------------- ------ -------- ---- ---- ---- ---- -- -----------------
------- ------------------------------------------------------------------------------------
-------
----- -------------- -----------------------
------- ------------------------
------- -------------------------
------- --------------- -- ------ ------------------------------------------
---------
-------
-------在页面中我们创建一个 select 控件并指定了一个 ng-model 属性来绑定用户选择的值。我们也创建了一个默认选项 --请选择--，以便在加载数据之前显示。注意，在 option 元素中我们使用了 ng-repeat 指令来遍历数据源数组，并为每个元素生成一个选项。我们还注意到选项的值和显示文本分别是该元素的 id 和 name 属性。
- 在 JavaScript 中定义一个 AngularJS 模块和控制器，并使用
$http服务加载数据源。
--- --- - ----------------------- ----
------------------------ ---------------- -------
-----------------------------------------------
------------ - --------------
---
---在这里我们创建了一个名为 myApp 的 AngularJS 模块，并定义了一个名为 myCtrl 的控制器。我们在控制器中使用 $http 服务来加载 JSON 数据源，并将其绑定到 $scope 对象上的 items 属性。
- 创建一个 JSON 数据源文件（例如
data.json），并将数据存储为数组对象。
-
------ -- ------- ------
------ -- ------- ------
------ -- ------- ------
------ -- ------- -----
-在此示例中，我们将数据作为一个对象数组存储，并为每个对象指定了 id 和 name 属性。您可以根据需要调整数据格式和属性名称。
示例代码
以下是完整的 HTML 和 JavaScript 代码：
--------- -----
------
------
--------------- ------ -------- ---- ---- ---- ---- -- -----------------
------- ------------------------------------------------------------------------------------
-------
----- -------------- -----------------------
------- ------------------------
------- -------------------------
------- --------------- -- ------ ------------------------------------------
---------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -------
-----------------------------------------------
------------ - --------------
---
---
---------
-------
-------指导意义
本文演示了如何使用 AngularJS 动态地填充下拉选择列表。以下是一些指导意义：
- 使用
$http服务加载 JSON 数据源，并将其绑定到$scope对象上。 - 使用
ng-repeat指令生成选项，以便根据数据源的元素动态创建下拉列表。 - 遵循良好的命名规范并使用注释，以提高代码可读性和可维护性。
希望这篇文章能够帮助您在
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25269