AngularJS ng-selected 指令：让下拉框选中状态更智能
在使用 AngularJS 构建动态表单时，你是否遇到过这样的场景：希望某个下拉选项默认被选中，或者根据数据模型的值动态切换选中状态？这正是 AngularJS ng-selected 指令的用武之地。它不像 ng-model 那样绑定表单值，而是专门控制 <option> 元素的 selected 属性，让你能精确掌控哪个选项处于选中状态。
想象一下，你正在开发一个用户资料编辑页面，有一个“职业”下拉框，包含“学生”“教师”“工程师”等选项。如果用户是“工程师”，你希望这个选项在页面加载时就自动选中。这时候，ng-selected 就能派上用场，它让你的视图与数据模型保持同步，无需手动操作 DOM。
什么是 ng-selected 指令？它的核心作用
ng-selected 是 AngularJS 提供的一个内置指令，用于动态控制 <option> 元素是否被选中。它的语法非常简单：
<option value="value" ng-selected="表达式">选项文本</option>
这里的 表达式 是一个返回布尔值的表达式。如果返回 true，该选项就会被选中；返回 false，则不会被选中。
这个指令的核心作用，是将“选中状态”与数据模型解耦，实现更灵活的控制。它特别适用于以下几种情况：
- 根据某个变量的值决定默认选中项
- 在多个选项中实现单选逻辑（结合
ng-model使用） - 动态更新选中项，比如从 API 获取数据后刷新下拉框状态
📌 小贴士：虽然
ng-selected本身不直接绑定表单值，但它与ng-model配合使用时，能实现“选中即赋值”的效果，是构建复杂表单的得力助手。
基础用法：让选项根据变量自动选中
我们先来看一个最基础的示例。假设我们有一个用户对象，其中 job 字段表示当前职业。我们希望在下拉框中，job 的值对应的那个选项自动选中。
<div ng-app="myApp" ng-controller="MyController">
<label>请选择职业：</label>
<select ng-model="user.job">
<option value="student" ng-selected="user.job === 'student'">学生</option>
<option value="teacher" ng-selected="user.job === 'teacher'">教师</option>
<option value="engineer" ng-selected="user.job === 'engineer'">工程师</option>
</select>
<p>当前选择的职业：{{ user.job }}</p>
</div>
<script>
// 定义应用模块
var app = angular.module('myApp', []);
// 定义控制器
app.controller('MyController', function($scope) {
// 初始化用户数据，job 为 'engineer'
$scope.user = {
job: 'engineer'
};
});
</script>
代码解析：
ng-model="user.job"：将下拉框的值绑定到user.job，实现双向数据绑定。ng-selected="user.job === 'engineer'"：当user.job等于'engineer'时，该选项会被选中。- 由于我们初始化时
user.job是'engineer'，因此“工程师”选项在页面加载时自动被选中。
💡 这里需要注意：
ng-selected只控制“选中状态”，不负责赋值。赋值功能由ng-model完成。两者协同工作，才能实现“选中即赋值”的完整流程。
高级用法：结合数组动态生成选项
在实际项目中，下拉选项往往来自后端数据，而不是写死在 HTML 中。这时，ng-selected 配合 ng-repeat 就非常强大了。
<div ng-app="myApp" ng-controller="MyController">
<label>请选择城市：</label>
<select ng-model="user.city">
<option value="">请选择城市</option>
<!-- 使用 ng-repeat 动态生成选项 -->
<option
ng-repeat="city in cities"
value="{{ city.name }}"
ng-selected="user.city === city.name"
>
{{ city.name }}
</option>
</select>
<p>当前选择的城市：{{ user.city }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
// 定义城市列表，数据来自 API 或配置
$scope.cities = [
{ name: '北京' },
{ name: '上海' },
{ name: '广州' },
{ name: '深圳' },
{ name: '杭州' }
];
// 初始化用户选择，比如默认选中“上海”
$scope.user = {
city: '上海'
};
});
</script>
关键点说明：
ng-repeat="city in cities"：遍历cities数组，为每个城市生成一个<option>。value="{{ city.name }}"：动态设置选项的值。ng-selected="user.city === city.name"：判断当前用户的city是否等于当前循环的city.name，如果是，就选中该选项。
这个模式在真实项目中非常常见，比如在用户注册表单中，国家/省份下拉框就经常用这种方式生成。
常见问题与最佳实践
使用 ng-selected 时，有些坑需要特别注意。以下是几个常见问题和对应的解决方案：
1. 选中项不生效？检查表达式逻辑
有时你会发现 ng-selected 没有生效，选项没有被选中。这通常是因为表达式返回了 false。建议在控制台打印表达式值，确认逻辑是否正确。
// 调试建议：在表达式中添加 console.log
ng-selected="console.log('当前 city:', city.name, '用户选择:', user.city); user.city === city.name"
2. 多个选项同时被选中？避免逻辑冲突
<select> 是单选框，只能有一个选项被选中。但如果多个 ng-selected 表达式都返回 true，浏览器会选中最后一个。这可能导致意外行为。
解决方案：确保你的表达式逻辑是互斥的。通常配合 ng-model 使用时，框架会自动处理，但手动控制时要格外小心。
3. 建议使用 ng-model + ng-selected 的组合模式
虽然 ng-selected 可以独立使用，但推荐与 ng-model 配合，形成“选中状态控制 + 值绑定”的完整闭环。
<select ng-model="user.job">
<option value="student" ng-selected="user.job === 'student'">学生</option>
<option value="teacher" ng-selected="user.job === 'teacher'">教师</option>
</select>
这样，用户选择时，ng-model 会更新 user.job，而 ng-selected 会根据新值重新判断是否选中，形成闭环。
实际应用场景：动态表单联动
想象一个订单系统，用户选择“国家”后，城市列表会动态变化。这时，ng-selected 可以帮助你保持选中状态。
<div ng-app="orderApp" ng-controller="OrderController">
<label>国家：</label>
<select ng-model="order.country" ng-change="loadCities()">
<option value="">请选择国家</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="JP">日本</option>
</select>
<label>城市：</label>
<select ng-model="order.city">
<option value="">请选择城市</option>
<option
ng-repeat="city in cities"
value="{{ city }}"
ng-selected="order.city === city"
>
{{ city }}
</option>
</select>
</div>
<script>
var app = angular.module('orderApp', []);
app.controller('OrderController', function($scope) {
$scope.order = {
country: 'CN',
city: '北京'
};
// 模拟加载城市数据
$scope.loadCities = function() {
if ($scope.order.country === 'CN') {
$scope.cities = ['北京', '上海', '广州', '深圳'];
} else if ($scope.order.country === 'US') {
$scope.cities = ['纽约', '洛杉矶', '芝加哥', '休斯顿'];
} else {
$scope.cities = ['东京', '大阪', '名古屋', '横滨'];
}
};
// 初始化加载城市
$scope.loadCities();
});
</script>
在这个例子中，当用户切换国家时，loadCities() 会更新城市列表，而 ng-selected 会根据 order.city 的值，自动选中对应城市。即使城市列表变化，选中状态依然保持，用户体验非常流畅。
总结：掌握 ng-selected，提升表单体验
AngularJS ng-selected 指令 是一个看似简单却功能强大的工具，它让你能够精确控制下拉框的选中状态，尤其在数据动态变化的场景下表现优异。通过结合 ng-model 和 ng-repeat，你可以构建出灵活、可维护的表单组件。
记住，ng-selected 的核心是“控制选中状态”，而不是“绑定值”。它和 ng-model 形成互补关系，一个负责“状态”，一个负责“数据”。当你在开发动态表单时，不妨多思考一下：是否可以使用 ng-selected 来优化用户体验？
从基础用法到高级场景，从静态选项到动态数据，ng-selected 都能胜任。掌握它，你离写出优雅、可维护的 AngularJS 代码又近了一步。