当前位置：首页 > news >正文

AngularJS Select(选择框)

news 2026/4/21 23:08:54

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>