如何在AngularJS中让下拉选框选中值与选项文本不同？

嘿，我刚好碰到过类似的需求！原生的HTML select本身没办法直接做到“选项显示A文本，选中后显示B文本”，因为选中后的显示就是选中option的文本。不过我们可以通过两种方式来实现你的需求，一种是调整ng-options配合逻辑处理，另一种是用CSS+小技巧模拟效果，我都给你梳理一下：

方案一：用ng-options绑定语言代码，配合查找逻辑 #

这种方案比较简单，不用改样式，只是调整ng-options和changeLanguage函数：

修改HTML代码 #

把ng-options改成lang.Lang_Code as lang.Language for lang in languagesMenu，这样下拉选项显示的是Language字段（比如English），ngModel绑定的是Lang_Code（比如en）：

<select class="select-language d-md-none d-inline-block" 
        ng-options="lang.Lang_Code as lang.Language for lang in languagesMenu" 
        ng-model="selectedLangCode" 
        ng-change="changeLanguage()" 
        ng-cloak>
</select>

修改JavaScript代码 #

1. 初始化默认选中的语言代码（比如默认选English）
2. 在changeLanguage函数里，根据选中的Lang_Code找到对应的完整语言对象，再跳转：

// navigation languages
$scope.languagesMenu = [
 { Language: "English", Country: "USA", Code: "en/us/", Lang_Code: "en" },
 { Language: "Italian", Country: "IT", Code: "it/it/", Lang_Code: "it" }
];

// 初始化选中的语言代码
$scope.selectedLangCode = 'en';

// change language
$scope.changeLanguage = function () {
  // 根据选中的Lang_Code匹配对应的语言对象
  const targetLang = $scope.languagesMenu.find(lang => lang.Lang_Code === $scope.selectedLangCode);
  if (targetLang) {
    $window.open(targetLang.Code, '_self');
  }
};

这个方案的缺点是：select选中后显示的还是选项的文本（比如English），而不是语言代码。如果你的需求是必须让select框显示代码，那看方案二。

方案二：用CSS+AngularJS监听模拟显示语言代码 #

这种方案能实现“下拉选项显示语言名称，选中后select框显示代码”的视觉效果：

修改HTML代码 #

还是用ng-options绑定整个语言对象，保持下拉选项显示Language：

<select class="select-language d-md-none d-inline-block" 
        ng-options="lang as lang.Language for lang in languagesMenu" 
        ng-model="language" 
        ng-change="changeLanguage()" 
        ng-cloak>
</select>

添加CSS样式 #

隐藏原生select的文本，用伪元素显示选中的语言代码：

.select-language {
  position: relative;
  color: transparent; /* 隐藏原生文本 */
  padding-right: 25px; /* 给下拉箭头留空间 */
}
/* 用伪元素显示语言代码 */
.select-language:after {
  content: attr(data-lang-code);
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #333;
  pointer-events: none; /* 不干扰点击 */
}
/* 保留原生下拉箭头 */
.select-language::-ms-expand {
  color: #333;
}

修改JavaScript代码 #

添加一个监听器，当选中的语言变化时，给select元素设置data-lang-code属性，让CSS伪元素能读取到：

// navigation languages
$scope.languagesMenu = [
 { Language: "English", Country: "USA", Code: "en/us/", Lang_Code: "en" },
 { Language: "Italian", Country: "IT", Code: "it/it/", Lang_Code: "it" }
];

// 初始化选中的语言
$scope.language = $scope.languagesMenu[0];
// 初始化data-lang-code属性
const selectEl = document.querySelector('.select-language');
selectEl.setAttribute('data-lang-code', $scope.language.Lang_Code);

// 监听语言变化，更新属性
$scope.$watch('language', (newLang) => {
  if (newLang) {
    selectEl.setAttribute('data-lang-code', newLang.Lang_Code);
  }
});

// change language
$scope.changeLanguage = function () {
 $window.open($scope.language.Code, '_self');
};

这样设置后，下拉展开时看到的是English、Italian，选中后select框里显示的是en、it，完全符合你的需求~

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