AngularJS Select(选择框)

AngularJS Select (选择框) 学习笔记在 AngularJS 中select元素与ng-model和ng-options指令配合使用可以构建功能强大、数据驱动的下拉选择框。它支持单选、多选、分组、动态选项等复杂场景。一、核心指令ng-model绑定选择框的值到作用域变量。ng-options推荐用于生成option标签比ng-repeat更高效、功能更强大。ng-repeat不推荐用于简单场景生成选项但性能较差且功能受限。二、基本用法单选1. 使用ng-options(推荐)这是 AngularJS 处理选择框的最佳实践。场景 A简单数组selectng-modelselectedCityng-optionscity for city in cities/select$scope.cities[Beijing,Shanghai,Guangzhou];// 结果selectedCity 存储选中的字符串如 Beijing场景 B对象数组 (显示特定属性)!-- 显示 name值为整个对象 --selectng-modelselectedUserng-optionsuser.name for user in users/select!-- 显示 name值为 user.id --selectng-modelselectedUserIdng-optionsuser.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-modelselectedFruitng-optionsfruit.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-modelselectedCityoptionng-repeatcity in citiesvalue{{city}}{{city}}/option/select缺点性能差无法使用track by无法处理对象引用。三、高级用法1. 设置默认选项 (Placeholder)方法 A使用空选项selectng-modelselectedCityng-optionscity for city in citiesoptionvaluedisabledselected请选择城市/option/select注意ng-model必须初始化为null或undefined才能显示默认选项。$scope.selectedCitynull;方法 B使用ng-options的group by或track by配合空值selectng-modelselectedCityng-optionscity.name for city in cities track by city.idoptionvalue-- 请选择 --/option/select2. 多选 (Multiple Selection)selectng-modelselectedCitiesng-optionscity for city in citiesmultiple/select// 结果selectedCities 是一个数组如 [Beijing, Shanghai]$scope.selectedCities[Beijing];// 预选中对象数组多选selectng-modelselectedUsersng-optionsuser.name for user in users track by user.idmultiple/select// 结果selectedUsers 是对象数组$scope.selectedUsers[{id:1,name:Alice}];3. 禁用特定选项 (disable when)selectng-modelselectedCityng-optionscity.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-modelselectedProvinceng-optionsp for p in provincesng-changeloadCities()/select!-- 城市 (根据省份动态加载) --selectng-modelselectedCityng-optionsc for c in citiesng-disabled!selectedProvince/select$scope.provinces[Guangdong,Beijing];$scope.cities[];$scope.loadCitiesfunction(){if($scope.selectedProvinceGuangdong){$scope.cities[Guangzhou,Shenzhen];}else{$scope.cities[Beijing];}$scope.selectedCitynull;// 重置城市};四、常见陷阱与解决方案1. 对象引用不匹配 (最常见)问题ng-model绑定的是对象但选项生成时使用了track by或值不匹配导致无法选中。!-- ❌ 错误ng-model 是对象但 ng-options 生成的是字符串 --selectng-modelselectedUserng-optionsuser.name for user in users/select!-- 此时 selectedUser 是字符串 Alice无法匹配对象 --!-- ✅ 正确ng-model 绑定整个对象 --selectng-modelselectedUserng-optionsuser as user.name for user in users/select2. 默认选项不显示原因ng-model初始值不是null或undefined或者选项值类型不匹配。// ✅ 确保初始值为 null$scope.selectedCitynull;3. 性能问题问题在大型列表中使用ng-repeat生成option。解决始终使用ng-options它由 AngularJS 内部优化只生成必要的 DOM 节点。4. 对象比较问题问题两个对象内容相同但引用不同导致无法选中。解决使用track by指定唯一标识符。selectng-modelselectedUserng-optionsuser as user.name for user in users track by user.id/select五、样式与验证1. 添加 CSS 类selectng-modelselectedCityng-optionscity for city in citiesclassform-controlng-class{error: form.city.$invalid}/select2. 表单验证formnamemyFormselectnamecityng-modelselectedCityng-optionscity for city in citiesrequiredoptionvaluedisabled请选择/option/selectdivng-showmyForm.city.$error.requiredclasserror城市是必填项/div/form六、最佳实践总结始终使用ng-options除非有极特殊需求否则不要使用ng-repeat生成option。对象绑定如果数据是对象数组尽量让ng-model绑定整个对象而不是 ID。使用track by在对象数组中使用track by指定唯一键提高性能和准确性。处理默认值初始化ng-model为null以显示占位符。禁用逻辑使用disable when优雅地处理不可选状态。级联选择在ng-change中重置子级选项保持数据一致性。通过掌握这些技巧可以构建出功能完善、用户体验良好的 AngularJS 选择框组件。