AngularJS Select

在AngularJS中,<select> 元素用来创建下拉选择框,通常用于从一组选项中选择一个值。

基本用法

下面是一个简单的例子,展示如何在AngularJS中使用 <select> 元素:

--------- -----
------
------
    ---------------- --------------
    ------- ------------------------------------------------------------------------------------
-------
----- -------------- -----------------------

------- ------------------------ ----------------- --- ----- -- --------
---------

------ --------- ---------------------

--------
    --- --- - ----------------------- ----
    ------------------------ ---------------- -
        ------------- - --------- --------- --------- ----------
    ---
---------

-------
-------

在上面的例子中,我们定义了一个名为 selectedFruit 的模型变量,用来存储用户选择的水果。然后使用 ng-options 指令来循环遍历 fruits 数组中的水果,并将其显示在下拉列表中。

多选下拉框

如果需要允许用户选择多个选项,可以在 <select> 元素上添加 multiple 属性:

------- ------------------------- ----------------- --- ----- -- ------- ---------
---------

------ --------- ----------------------

在这种情况下,selectedFruits 将会是一个数组,存储用户选择的所有水果。

设置默认选项

如果想要在下拉框中设置一个默认选项,可以在控制器中初始化模型变量的值:

------------------------ ---------------- -
    ------------- - --------- --------- --------- ----------
    -------------------- - ---------
---

这样在页面加载时,下拉框将默认选中 'Banana' 这个选项。

总结

在本章节中,我们学习了如何在AngularJS中使用 <select> 元素创建下拉选择框,包括基本用法、多选下拉框和设置默认选项。在下一章节中,我们将继续探讨AngularJS的其他功能和用法。


上一篇:AngularJS Http
下一篇:AngularJS 表格