AngularJS中如何为select下拉菜单设置默认选中选项？

你的代码存在两个核心问题，导致默认选中效果失效：

1. 类型不匹配：ng-model绑定的是Cars[0]对象，但ng-value设置的是拼接字符串（还存在语法错误，缺少连接符），两者类型不一致，AngularJS无法匹配对应选中项。
2. 手动selected属性冲突：空<option>上的selected属性会和AngularJS的ng-model状态控制逻辑冲突，干扰默认选中的判断。

方案一：使用ng-options（推荐） #

AngularJS专门提供了ng-options指令用于渲染下拉选项，能自动处理类型匹配与状态同步，比ng-repeat更可靠：

<select ng-model="selectedCar" class="form-control" ng-required="true"
        ng-options="car as (car.firstname + ' ' + car.lastname) for car in Cars">
    <option value="">Select a job title</option>
</select>

然后在控制器中初始化默认值（不推荐用ng-init，控制器是管理数据的标准位置）：

// 示例控制器代码
app.controller('YourController', function($scope) {
    $scope.Cars = [/* 你的数据数组 */];
    // 确保数组非空时设置默认选中第一个项
    if ($scope.Cars.length > 0) {
        $scope.selectedCar = $scope.Cars[0];
    }
});

方案二：修复ng-repeat实现（不推荐，但可生效） #

如果坚持使用ng-repeat，需要让ng-model与ng-value的类型完全一致，同时修正语法错误：

<select ng-init="selectedCar = Cars[0].firstname + ' ' + Cars[0].lastname" 
        ng-model="selectedCar" class="form-control" ng-required="true">
    <option value="">Select a job title</option>
    <option ng-repeat="car in Cars" ng-value="car.firstname + ' ' + car.lastname">
        {{car.firstname}} {{car.lastname}}
    </option>
</select>

注意事项：

• 移除空<option>的selected属性，由ng-model统一控制选中状态
• 修正ng-value的字符串拼接语法，用+ ' ' +连接名字字段
• ng-init中初始化的值必须和ng-value的输出完全一致

内容的提问来源于stack exchange，提问作者deagleshot