AngularJS中如何将本地存储值设为下拉菜单的默认选中值？

嘿，我来帮你搞定这个默认选中的小问题！核心症结其实很明确：你从本地存储拿到的是语言名称的字符串，但你的md-select绑定的是整个languages对象，类型不匹配导致下拉菜单认不出要选哪个。咱们一步步来改：

1. 修正控制器，把本地存储值映射成对应对象 #

在控制器初始化的时候，先取出本地存储的语言名称，然后在你的languageList里找到匹配的对象，赋值给selectedLanguage。修改后的控制器代码如下：

// 初始化时处理默认选中逻辑
const savedLangName = localStorage.getItem('selectLanguage');
if (savedLangName) {
  // 从语言列表里找到名称匹配的对象
  ctrl.selectedLanguage = ctrl.languageList.find(lang => lang.name === savedLangName);
} else {
  // 如果本地存储没值，默认选第一个选项
  ctrl.selectedLanguage = ctrl.languageList[0];
}

ctrl.languageChange = function(key) {
  if (typeof this.selectedLanguage !== 'undefined') {
    localStorage.setItem('selectLanguage', key);
    $route.reload();
  }
};

2. 优化模板，移除无效指令 #

AngularJS Material的md-select不需要ng-selected，它完全靠ng-model控制选中状态。另外你模板里的md-option标签写法有点小问题，修正后如下：

<div flex>
  <md-select 
    ng-model="$callcenterController.selectedLanguage"
    ng-change="$callcenterHomeController.languageChange($callcenterController.selectedLanguage.name)"
    placeholder="{{$callcenterController.selectLanguageLabel}}"
  >
    <md-option 
      ng-value="languages" 
      ng-repeat="languages in $callcenterHomeController.languageList"
    >
      {{ languages.name }}
    </md-option>
  </md-select>
</div>

关键说明 #

• 之前不生效的原因：ng-model绑定的是对象，而你直接把本地存储的字符串赋值过去，下拉菜单找不到对应的选项，自然没法默认选中。用find方法把字符串转换成对应对象，就能和ng-value的对象匹配上了。
• 移除ng-selected：md-select是Material封装的组件，原生ng-selected在这里不起作用，反而可能造成冲突，直接删掉就好。
• 兜底逻辑：如果本地存储没有值，默认选第一个选项，保证下拉菜单始终有选中状态。

这样改完之后，页面加载时就会自动把本地存储里的语言设置成下拉菜单的默认选中项啦！

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