AngularJS中如何为ng-select或ng-options设置默认选中文本？

嘿，刚接触AngularJS遇到这种小问题太正常了，我来给你捋清楚怎么搞定！

首先得搞懂一个核心逻辑：AngularJS的ng-model和ng-options是靠对象引用匹配的，不是单纯的文本值相等。所以你不能直接把字符串赋值给users.selectedUser，得把它设为你数据数组里对应的那个完整对象才行。

完整示例代码 #

HTML部分

<div ng-app="userModule" ng-controller="userCtrl">
  <div class="row">
    <div class="col-md-6">
      <label>User Name:</label> <br />
      <select ng-model="users.selectedUser" class="form-control" 
              ng-options="item.UserName for item in users.list">
      </select>
    </div>
  </div>
</div>

JavaScript部分

angular.module('userModule', [])
.controller('userCtrl', function($scope) {
  // 模拟你获取到的JSON数据
  $scope.users = {
    list: [
      { UserName: "Alice", Id: 1 },
      { UserName: "Bob", Id: 2 },
      { UserName: "Charlie", Id: 3 }
    ],
    selectedUser: null // 先初始化选中项为null
  };

  // 假设你想要默认选中的文本值是"Bob"
  var targetUserName = "Bob";
  
  // 遍历数组找到对应的对象，赋值给selectedUser
  for(let i = 0; i < $scope.users.list.length; i++) {
    if($scope.users.list[i].UserName === targetUserName) {
      $scope.users.selectedUser = $scope.users.list[i];
      break;
    }
  }
});

关键注意点 #

• ng-options语法要准确：示例里的item.UserName for item in users.list表示下拉框显示UserName字段内容，实际绑定的是整个item对象，这是正确的用法。
• 必须绑定对象而非纯文本：别直接给selectedUser赋值字符串，一定要找到数据数组中匹配的那个对象，AngularJS才能识别并选中对应的选项。
• 异步数据要注意时机：如果你的JSON数据是通过$http这类异步请求获取的，一定要把设置默认选中的逻辑放在请求成功的回调里，等数据完全加载完成后再执行匹配操作，不然会因为数组为空找不到目标对象。

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