在 AngularJS 中，ng-model 指令可以用于绑定表单元素的值到作用域中的变量。在输入框、单选框和复选框等表单控件中，ng-model 非常好用，而在 SELECT 控件中也同样适用。
基本用法
在 SELECT 元素上添加 ng-model 指令，可以将选中的选项的值绑定到作用域中的变量。例如：
------- ------------------------- ------- ----------------------- ------- ------------------------- ------- ------------------------ ---------
上述代码创建了一个包含三个选项的下拉菜单，它们的值分别为 "red"、"green" 和 "blue"。当用户选择其中一个选项时，AngularJS 会自动将选项的值赋给 $scope.selectedColor 变量。
默认选项
有时候需要在页面初次加载时设置 SELECT 控件的默认选项。这可以通过将作用域中的变量初始化为默认值来实现。例如：
------- ------------------------- ------- ----------------------- ------- ----------------------- ------- ------------------------- ------- ------------------------ ---------
在上面的例子中，初始时 SELECT 控件显示 "请选择颜色"，而 $scope.selectedColor 初始值为 ""。用户选择一个选项后，$scope.selectedColor 将被设置为相应的值。
动态选项
有时候需要动态地向 SELECT 控件添加或删除选项。这可以通过在作用域中维护一个数组来实现。例如：
------- ------------------------- ------- ----------------------- ------- ---------------- -- ------- --------- ----- ------ ----- ----------- ---------
上面的代码使用 ng-repeat 指令动态地生成了一组选项，它们的值和显示文本都是数组 fruits 中的元素。
当需要添加或删除选项时，只需要更新 fruits 数组即可。AngularJS 会自动重新渲染 SELECT 控件以反映更新后的选项。
总结
ng-model 指令让在 SELECT 控件中使用双向数据绑定变得非常容易。常见的用法包括设置默认选项、动态添加、删除选项等。掌握这些技巧可以让你更加熟练地使用 AngularJS。
示例代码：https://codepen.io/ChatGPT/pen/mdjXPWq
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25666