AngularJS下拉框点击显示更多功能实现求助

原生<select>标签受浏览器默认行为限制，点击选项后会自动收起下拉框，没法实现点击"Show More"后保持下拉展开的效果。建议用自定义下拉组件模拟实现，以下是具体代码：

1. 控制器逻辑 #

在你的AngularJS控制器中添加以下变量和方法：

angular.module('yourApp').controller('YourController', function($scope) {
  // 控制是否显示全部选项
  $scope.showAllItems = false;
  // 绑定选中的分组
  $scope.selectedGroup = null;
  // 控制下拉面板展开状态
  $scope.isDropdownOpen = false;

  // 处理选项选择逻辑
  $scope.selectGroup = function(group) {
    if (group.isShowMore) {
      // 点击Show More时，切换显示全部状态，不选中值
      $scope.showAllItems = true;
      return;
    }
    $scope.selectedGroup = group;
    // 选中后收起下拉（可选）
    $scope.isDropdownOpen = false;
  };

  // 初始化选中项（如果需要）
  if ($scope.items.groups.length > 0) {
    $scope.selectedGroup = $scope.items.groups.find(g => g.selected) || $scope.items.groups[0];
  }
});

2. 自定义下拉HTML结构 #

替换原有的<select>代码为以下自定义下拉：

<div ng-if="items.groups.length > 0" class="custom-select-wrapper bx--select-input__wrapper">
  <!-- 下拉触发按钮 -->
  <div 
    class="custom-select-trigger bx--select-input"
    ng-click="isDropdownOpen = !isDropdownOpen"
  >
    {{selectedGroup ? selectedGroup.label : 'Select a group'}}
    <span class="dropdown-arrow">▼</span>
  </div>

  <!-- 下拉面板 -->
  <div 
    class="custom-select-panel"
    ng-show="isDropdownOpen"
  >
    <!-- 显示前5项或全部项 -->
    <div 
      class="custom-select-option bx--select-option"
      ng-repeat="group in items.groups | limitTo: showAllItems ? items.groups.length : 5"
      ng-click="selectGroup(group)"
      ng-class="{active: selectedGroup === group}"
    >
      {{group.label}}
    </div>

    <!-- 仅当未显示全部时，显示Show More选项 -->
    <div 
      class="custom-select-option show-more-option bx--select-option"
      ng-if="!showAllItems && items.groups.length > 5"
      ng-click="selectGroup({isShowMore: true})"
    >
      Show More({{items.groups.length - 5}})
    </div>
  </div>
</div>

3. 必要的CSS样式 #

添加以下样式来实现下拉的视觉效果和滚动：

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-select-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.custom-select-option {
  padding: 8px 12px;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.active {
  background-color: #f0f0f0;
}

.show-more-option {
  color: #0066cc;
  font-style: italic;
}

关键说明 #

• 用<div>模拟下拉组件，完全控制下拉面板的显示/隐藏状态，避开原生select的默认行为限制。
• 通过showAllItems变量切换显示前5项或全部项，点击"Show More"时直接切换该变量，保持下拉面板展开。
• 给下拉面板设置固定max-height和overflow-y: auto，内容超过高度时自动出现滚动条。
• 保留了原有的Carbon Design类名，可与现有样式兼容。

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