在AngularJS中,<select>
元素用来创建下拉选择框,通常用于从一组选项中选择一个值。
基本用法
下面是一个简单的例子,展示如何在AngularJS中使用 <select>
元素:
--------- ----- ------ ------ ---------------- -------------- ------- ------------------------------------------------------------------------------------ ------- ----- -------------- ----------------------- ------- ------------------------ ----------------- --- ----- -- -------- --------- ------ --------- --------------------- -------- --- --- - ----------------------- ---- ------------------------ ---------------- - ------------- - --------- --------- --------- ---------- --- --------- ------- -------
在上面的例子中,我们定义了一个名为 selectedFruit
的模型变量,用来存储用户选择的水果。然后使用 ng-options
指令来循环遍历 fruits
数组中的水果,并将其显示在下拉列表中。
多选下拉框
如果需要允许用户选择多个选项,可以在 <select>
元素上添加 multiple
属性:
------- ------------------------- ----------------- --- ----- -- ------- --------- --------- ------ --------- ----------------------
在这种情况下,selectedFruits
将会是一个数组,存储用户选择的所有水果。
设置默认选项
如果想要在下拉框中设置一个默认选项,可以在控制器中初始化模型变量的值:
------------------------ ---------------- - ------------- - --------- --------- --------- ---------- -------------------- - --------- ---
这样在页面加载时,下拉框将默认选中 'Banana' 这个选项。
总结
在本章节中,我们学习了如何在AngularJS中使用 <select>
元素创建下拉选择框,包括基本用法、多选下拉框和设置默认选项。在下一章节中,我们将继续探讨AngularJS的其他功能和用法。