如何用Bootstrap 4限制下拉菜单选项数量并实现ShowMore弹窗功能

Got it, let's tackle this dropdown problem step by step! Here's how you can implement the functionality to show only the first 5 items plus a "SHOW More" option that opens a popup with the rest:

Step 1: Add Computed Properties in Your Component #

First, we'll create two getter properties to split your list into the dropdown-displayed items and the remaining items for the popup. This keeps your template clean and avoids manual list management.

import { Component } from '@angular/core';
// Uncomment below if using Angular Material Dialog instead of Bootstrap modals
// import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  mylist = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
  selectedItemValue: string | null = null;

  // Inject Dialog if using Angular Material
  // constructor(private dialog: MatDialog) {}

  // Get first 5 items + SHOW More for the dropdown
  get displayedDropdownItems() {
    const firstFiveItems = this.mylist.slice(0, 5);
    // Add a divider and SHOW More (optional divider)
    return [...firstFiveItems, 'divider', 'SHOW More'];
  }

  // Get remaining items for the popup
  get remainingListItems() {
    return this.mylist.slice(5);
  }

  selectedItem(item: string) {
    // Handle SHOW More click
    if (item === 'SHOW More') {
      this.openShowMorePopup();
      return;
    }

    // Handle normal item selection
    this.selectedItemValue = item;
    console.log('Selected item:', item);
    // Call your existing onUpdateData() or other logic here
    this.onUpdateData();
  }

  onUpdateData() {
    // Your existing logic goes here
  }

  openShowMorePopup() {
    // Option 1: Use Bootstrap Modal (matches your existing Bootstrap classes)
    const modalElement = document.getElementById('showMoreModal');
    if (modalElement) {
      // @ts-ignore (ignore type error if Bootstrap is loaded globally)
      const modal = new bootstrap.Modal(modalElement);
      modal.show();
    }

    // Option 2: Use Angular Material Dialog (uncomment if using Material)
    // this.dialog.open(ShowMorePopupComponent, {
    //   data: { items: this.remainingListItems }
    // }).afterClosed().subscribe(selectedItem => {
    //   if (selectedItem) {
    //     this.selectedItemValue = selectedItem;
    //     console.log('Selected from popup:', selectedItem);
    //   }
    // });
  }

  selectItemFromPopup(item: string) {
    this.selectedItemValue = item;
    console.log('Selected from popup:', item);
    
    // Close Bootstrap modal
    const modalElement = document.getElementById('showMoreModal');
    if (modalElement) {
      // @ts-ignore
      const modal = bootstrap.Modal.getInstance(modalElement);
      modal.hide();
    }
  }
}

Step 2: Update Your Template #

Modify the dropdown to use our computed list, add the popup modal, and display the selected item in the toggle button:

<div class="btn-group">
  <button type="button" class="btn btn-light dropdown-toggle dropbtn" 
          data-toggle="dropdown" (click)="onUpdateData()">
    <!-- Show selected item or default text -->
    {{ selectedItemValue || 'Select an item' }}
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdwn">
    <!-- Render dropdown items with optional divider -->
    <ng-container *ngFor="let item of displayedDropdownItems">
      <li *ngIf="item === 'divider'" class="divider"></li>
      <a *ngIf="item !== 'divider'" 
         class="dropdown-item p-1 small" 
         (click)="selectedItem(item)">
        <span class="mr-2">
          <small style="color: gray;">{{ item }}</small>
        </span>
      </a>
    </ng-container>
  </div>
</div>

<!-- Bootstrap Modal for SHOW More -->
<div class="modal fade" id="showMoreModal" tabindex="-1" 
     aria-labelledby="showMoreModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="showMoreModalLabel">Select an Item</h5>
        <button type="button" class="btn-close" 
                data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="list-group">
          <a class="list-group-item list-group-item-action small" 
             *ngFor="let item of remainingListItems" 
             (click)="selectItemFromPopup(item)">
            {{ item }}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Key Notes: #

• Computed Properties: displayedDropdownItems automatically handles showing the first 5 items plus the divider and "SHOW More" option. remainingListItems grabs all items after the first 5 for the popup.
• Popup Options: We used Bootstrap's modal since your original code uses Bootstrap classes, but I also included an Angular Material Dialog alternative if that's part of your stack.
• User Experience: The toggle button now shows the selected item, making it clear what's chosen.
• Clean Logic: We separated the selection handling for dropdown items vs. the "SHOW More" trigger, keeping your code organized.

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