AngularJS - 在 SELECT 中使用 ng-model

在 AngularJS 中，ng-model 指令可以用于绑定表单元素的值到作用域中的变量。在输入框、单选框和复选框等表单控件中，ng-model 非常好用，而在 SELECT 控件中也同样适用。

基本用法

在 SELECT 元素上添加 ng-model 指令，可以将选中的选项的值绑定到作用域中的变量。例如：

<select ng-model="selectedColor">
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

上述代码创建了一个包含三个选项的下拉菜单，它们的值分别为 "red"、"green" 和 "blue"。当用户选择其中一个选项时，AngularJS 会自动将选项的值赋给 $scope.selectedColor 变量。

默认选项

有时候需要在页面初次加载时设置 SELECT 控件的默认选项。这可以通过将作用域中的变量初始化为默认值来实现。例如：

<select ng-model="selectedColor">
  <option value="">请选择颜色</option>
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

在上面的例子中，初始时 SELECT 控件显示 "请选择颜色"，而 $scope.selectedColor 初始值为 ""。用户选择一个选项后，$scope.selectedColor 将被设置为相应的值。

动态选项

有时候需要动态地向 SELECT 控件添加或删除选项。这可以通过在作用域中维护一个数组来实现。例如：

<select ng-model="selectedFruit">
  <option value="">请选择水果</option>
  <option ng-repeat="fruit in fruits" value="{{ fruit }}">{{ fruit }}</option>
</select>

上面的代码使用 ng-repeat 指令动态地生成了一组选项，它们的值和显示文本都是数组 fruits 中的元素。

当需要添加或删除选项时，只需要更新 fruits 数组即可。AngularJS 会自动重新渲染 SELECT 控件以反映更新后的选项。

总结

ng-model 指令让在 SELECT 控件中使用双向数据绑定变得非常容易。常见的用法包括设置默认选项、动态添加、删除选项等。掌握这些技巧可以让你更加熟练地使用 AngularJS。

示例代码：https://codepen.io/ChatGPT/pen/mdjXPWq

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25666