web-dev-qa-db-fra.com

Comment configurer NgbDropdown pour afficher l'élément sélectionné dans la liste déroulante

Dans ng-bootstrap NgbDropdown , comment voulez-vous afficher le texte du bouton sélectionné de sorte que tout élément sélectionné par l'utilisateur remplace le texte par défaut initialement affiché?

Dans l'exemple ci-dessous, l'objectif est d'afficher l'option de tri choisie par l'utilisateur. 

<div ngbDropdown class="d-inline-block">

  <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>Sort by...</button>

  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item">Year</button>
    <button class="dropdown-item">Title</button>
    <button class="dropdown-item">Author</button>
  </div>

</div>

Merci de votre aide!

angularng-bootstrap
9
TrumanCode

Démonstré dans this plunkr .

Exemple de composant:

import {Component} from '@angular/core';

@Component({
  selector: 'dropdown-demo-sortby',
  template: `
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle>{{selectedSortOrder}}</button>
      <div class="dropdown-menu" aria-labelledby="sortMenu">
        <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)" >{{sortOrder}}</button>
      </div>
    </div>
  `
})
export class DropdownDemoSortby {

  sortOrders: string[] = ["Year", "Title", "Author"];
  selectedSortOrder: string = "Sort by...";

  ChangeSortOrder(newSortOrder: string) { 
    this.selectedSortOrder = newSortOrder;
  }

}
14
Rob Mullins

J'ai résolu ce problème en m'accrochant à l'événement sur le clic du bouton sélectionné (l'utilisation de l'événement blur ne fonctionne pas dans Firefox) - Démo Plunkr

Le composant:

export class NgbdDropdownBasic {
    displayMessage = "Sort by...";
    sortOptions = ["Balance", "Company", "Last Name"]

    changeMessage(selectedItem: string){
       this.displayMessage = "Sort by " + selectedItem;
     }
 }

Le modèle avec NgbDropdown:

 <div ngbDropdown class="d-inline-block">

    <button class="btn btn-outline-primary"
            id="dropdownMenu1"
            ngbDropdownToggle >

    {{displayMessage}}

    </button>

    <div class="dropdown-menu" id="options" aria-labelledby="dropdownMenu1">
      <div *ngFor="let option of sortOptions">
        <button class="dropdown-item" 
                id="option" on-click="changeMessage(option)">{{option}}</button>

      </div>
    </div>
  </div>
1
TrumanCode