)
AngularJS Select (选择框) 学习笔记
在 AngularJS 中，<select>元素与ng-model和ng-options指令配合使用，可以构建功能强大、数据驱动的下拉选择框。它支持单选、多选、分组、动态选项等复杂场景。
一、核心指令
ng-model：绑定选择框的值到作用域变量。ng-options：推荐用于生成<option>标签，比ng-repeat更高效、功能更强大。ng-repeat：（不推荐）用于简单场景生成选项，但性能较差且功能受限。
二、基本用法：单选
1. 使用ng-options(推荐)
这是 AngularJS 处理选择框的最佳实践。
场景 A：简单数组
<selectng-model="selectedCity"ng-options="city for city in cities"></select>$scope.cities=['Beijing','Shanghai','Guangzhou'];// 结果：selectedCity 存储选中的字符串，如 "Beijing"场景 B：对象数组 (显示特定属性)
<!-- 显示 name，值为整个对象 --><selectng-model="selectedUser"ng-options="user.name for user in users"></select><!-- 显示 name，值为 user.id --><selectng-model="selectedUserId"ng-options="user.name for user in users track by user.id"></select>$scope.users=[{id:1,name:'Alice'},{id:2,name:'Bob'}];// 结果：selectedUser 存储整个对象 {id:1, name:'Alice'}// selectedUserId 存储 id (1 或 2)场景 C：分组 (Group By)
<selectng-model="selectedFruit"ng-options="fruit.name group by fruit.category for fruit in fruits"></select>$scope.fruits=[{name:'Apple',category:'Fruit'},{name:'Banana',category:'Fruit'},{name:'Carrot',category:'Vegetable'}];// 结果：选项按 category 分组显示2. 使用ng-repeat(不推荐)
仅用于极简单的静态选项，无法处理复杂对象绑定。
<selectng-model="selectedCity"><optionng-repeat="city in cities"value="{{city}}">{{city}}</option></select>- 缺点：性能差，无法使用
track by，无法处理对象引用。
三、高级用法
1. 设置默认选项 (Placeholder)
方法 A：使用空选项
<selectng-model="selectedCity"ng-options="city for city in cities"><optionvalue=""disabledselected>请选择城市</option></select>- 注意：
ng-model必须初始化为null或undefined才能显示默认选项。
$scope.selectedCity=null;方法 B：使用ng-options的group by或track by配合空值
<selectng-model="selectedCity"ng-options="city.name for city in cities track by city.id"><optionvalue="">-- 请选择 --</option></select>2. 多选 (Multiple Selection)
<selectng-model="selectedCities"ng-options="city for city in cities"multiple></select>// 结果：selectedCities 是一个数组，如 ['Beijing', 'Shanghai']$scope.selectedCities=['Beijing'];// 预选中对象数组多选：
<selectng-model="selectedUsers"ng-options="user.name for user in users track by user.id"multiple></select>// 结果：selectedUsers 是对象数组$scope.selectedUsers=[{id:1,name:'Alice'}];3. 禁用特定选项 (disable when)
<selectng-model="selectedCity"ng-options="city.name disable when city.isDisabled for city in cities"></select>$scope.cities=[{name:'Beijing',isDisabled:false},{name:'Shanghai',isDisabled:true},// 此选项不可选{name:'Guangzhou',isDisabled:false}];4. 动态选项 (级联选择)
<!-- 省份 --><selectng-model="selectedProvince"ng-options="p for p in provinces"ng-change="loadCities()"></select><!-- 城市 (根据省份动态加载) --><selectng-model="selectedCity"ng-options="c for c in cities"ng-disabled="!selectedProvince"></select>$scope.provinces=['Guangdong','Beijing'];$scope.cities=[];$scope.loadCities=function(){if($scope.selectedProvince==='Guangdong'){$scope.cities=['Guangzhou','Shenzhen'];}else{$scope.cities=['Beijing'];}$scope.selectedCity=null;// 重置城市};四、常见陷阱与解决方案
1. 对象引用不匹配 (最常见)
问题：ng-model绑定的是对象，但选项生成时使用了track by或值不匹配，导致无法选中。
<!-- ❌ 错误：ng-model 是对象，但 ng-options 生成的是字符串 --><selectng-model="selectedUser"ng-options="user.name for user in users"></select><!-- 此时 selectedUser 是字符串 "Alice"，无法匹配对象 --><!-- ✅ 正确：ng-model 绑定整个对象 --><selectng-model="selectedUser"ng-options="user as user.name for user in users"></select>2. 默认选项不显示
原因：ng-model初始值不是null或undefined，或者选项值类型不匹配。
// ✅ 确保初始值为 null$scope.selectedCity=null;3. 性能问题
问题：在大型列表中使用ng-repeat生成<option>。
解决：始终使用ng-options，它由 AngularJS 内部优化，只生成必要的 DOM 节点。
4. 对象比较问题
问题：两个对象内容相同但引用不同，导致无法选中。
解决：使用track by指定唯一标识符。
<selectng-model="selectedUser"ng-options="user as user.name for user in users track by user.id"></select>五、样式与验证
1. 添加 CSS 类
<selectng-model="selectedCity"ng-options="city for city in cities"class="form-control"ng-class="{'error': form.city.$invalid}"></select>2. 表单验证
<formname="myForm"><selectname="city"ng-model="selectedCity"ng-options="city for city in cities"required><optionvalue=""disabled>请选择</option></select><divng-show="myForm.city.$error.required"class="error">城市是必填项</div></form>六、最佳实践总结
- 始终使用
ng-options：除非有极特殊需求，否则不要使用ng-repeat生成<option>。 - 对象绑定：如果数据是对象数组，尽量让
ng-model绑定整个对象，而不是 ID。 - 使用
track by：在对象数组中，使用track by指定唯一键，提高性能和准确性。 - 处理默认值：初始化
ng-model为null以显示占位符。 - 禁用逻辑：使用
disable when优雅地处理不可选状态。 - 级联选择：在
ng-change中重置子级选项，保持数据一致性。
通过掌握这些技巧，可以构建出功能完善、用户体验良好的 AngularJS 选择框组件。
