Angular 1中ng-option下拉框选中后显示短字符的实现方法

嘿，我来给你几个靠谱的方案，不用调整CSS宽度就能实现你要的需求：

方案一：自定义指令修改选中后的显示文本 #

你可以写一个AngularJS指令，监听下拉框的选中事件，动态修改选中后的显示内容，同时保留下拉选项的完整文本。

代码示例：

angular.module('yourApp').directive('shortenSelectedText', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // 监听选中事件，截断显示文本
      element.on('change', function() {
        var selectedOption = element.find('option:selected');
        var fullText = selectedOption.text();
        var shortText = fullText.substring(0, 2);
        // 保存原始文本，用于下拉时恢复
        selectedOption.data('originalText', fullText);
        selectedOption.text(shortText);
      });

      // 下拉展开时恢复原始选项文本
      element.on('mousedown', function() {
        var selectedOption = element.find('option:selected');
        var originalText = selectedOption.data('originalText');
        if (originalText) {
          selectedOption.text(originalText);
        }
      });
    }
  };
});

在HTML中使用指令：

<select ng-options="name for name in ['JOHN', 'MIKE', 'RONALDO']" 
        ng-model="selectedName" 
        shorten-selected-text>
</select>

这个指令的逻辑很简单：选中选项时把显示文本截断为前两位，点击下拉展开时恢复原始完整文本，既满足选中后的短文本显示，又不影响下拉选项的完整展示。

方案二：使用对象数组+自定义显示容器 #

把选项改成包含完整名称和短名称的对象数组，然后用一个容器包裹下拉框，叠加一个显示短文本的元素，同时隐藏原生下拉框的默认文字（不是调整宽度，是通过CSS让原生文字透明）。

首先在控制器中定义数据：

$scope.nameList = [
  {fullName: 'JOHN', shortName: 'JO'},
  {fullName: 'MIKE', shortName: 'MI'},
  {fullName: 'RONALDO', shortName: 'RO'}
];
$scope.selectedItem = $scope.nameList[0];

然后编写HTML结构：

<div class="custom-select-wrap">
  <span class="short-text-display">{{selectedItem.shortName}}</span>
  <select ng-options="item.fullName for item in nameList" 
          ng-model="selectedItem" 
          class="transparent-text-select">
  </select>
</div>

对应的辅助CSS：

.custom-select-wrap {
  position: relative;
  display: inline-block;
}
.short-text-display {
  position: absolute;
  top: 0;
  left: 8px;
  pointer-events: none; /* 让点击事件穿透到下方的下拉框 */
  line-height: 28px; /* 和下拉框的行高对齐 */
}
.transparent-text-select {
  color: transparent; /* 隐藏原生下拉框的文字 */
  background: transparent;
  border: 1px solid #ccc;
  padding: 4px 20px 4px 8px;
}

这种方法逻辑更直观，完全保留原生下拉框的交互，只是用自定义元素替换了选中后的显示内容。

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