AngularJS 1.5实现下拉框选中与选项文本不同显示

嘿，这个需求我之前也碰到过，AngularJS 1.5的原生<select>控件确实没法直接实现“展开显示name、选中显示selected文本”的效果——毕竟原生select选中后显示的就是<option>标签里的固定内容。不过咱们可以自己模拟一个下拉组件，灵活度拉满，实现起来也挺简单的。

完整实现示例 #

1. 控制器代码 #

首先在你的AngularJS控制器里定义选项数据和控制逻辑：

angular.module('myApp', [])
.controller('SelectController', ['$scope', function($scope) {
  // 定义你的选项数组，和你给出的示例结构一致
  $scope.options = [
    {id: 1, name: 'text', selected: 'this was selected'},
    {id: 2, name: 'another text', selected: 'this one is selected'},
    {id: 3, name: 'third text', selected: 'you picked me!'}
  ];

  // 控制下拉框展开状态
  $scope.isDropdownOpen = false;
  // 存储选中的选项对象
  $scope.selectedOption = null;

  // 切换下拉框展开/收起状态
  $scope.toggleDropdown = function() {
    $scope.isDropdownOpen = !$scope.isDropdownOpen;
  };

  // 选中选项的核心逻辑
  $scope.selectOption = function(option) {
    $scope.selectedOption = option;
    $scope.isDropdownOpen = false; // 选中后自动收起下拉列表
  };
}]);

2. HTML模板 #

然后在页面里添加模拟下拉框的HTML结构：

<div ng-app="myApp" ng-controller="SelectController">
  <!-- 自定义下拉框容器 -->
  <div class="custom-dropdown" ng-class="{open: isDropdownOpen}" ng-click="toggleDropdown()">
    <!-- 选中后的显示文本 -->
    <div class="dropdown-selected">
      {{selectedOption ? selectedOption.selected : '请选择一个选项'}}
    </div>
    <!-- 下拉选项列表 -->
    <ul class="dropdown-options" ng-show="isDropdownOpen">
      <li ng-repeat="opt in options" ng-click="selectOption(opt)">
        {{opt.name}}
      </li>
    </ul>
  </div>
</div>

3. 样式代码（CSS） #

最后加上基础样式，让它看起来像个正经的下拉框：

.custom-dropdown {
  position: relative;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-selected {
  padding: 8px 12px;
  background-color: #fff;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 100;
}

.dropdown-options li {
  padding: 8px 12px;
}

.dropdown-options li:hover {
  background-color: #f8f9fa;
}

.custom-dropdown.open .dropdown-selected {
  border-radius: 4px 4px 0 0;
}

实现思路解释 #

• 用<div>和<ul>模拟原生select的结构，这样我们可以完全分开控制选中后的显示文本（绑定selectedOption.selected）和下拉列表的选项文本（绑定opt.name）。
• 通过isDropdownOpen变量控制选项列表的展开/收起状态，点击容器时切换这个变量。
• 点击选项时，把选中的对象赋值给selectedOption，同时自动收起下拉列表，提升用户体验。

这种方式比原生select更灵活，还能轻松自定义样式，完全适配你的需求~

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