ng-select: добавить дополнительную опцию - PullRequest
Новая
       24

ng-select: добавить дополнительную опцию

2 голосов
/ 16 марта 2020

Как добавить дополнительный элемент в раскрывающийся список ng-select, например Create New in the following image:

enter image description here

Это текущий код, который у меня есть : 

<ng-select
    [multiple]="true"
    [hideSelected]="true"
    [items]="robots"
    formControlName="RobotGUID"
    bindLabel="Name"
    bindValue="GUID"
>
    <ng-template ng-label-tmp let-item="item" let-clear="clear">
        <ng-container *ngIf="item.GUID">
            <span class="ng-value-icon left" (click)="onRobotEditClick($event, item.GUID)" aria-hidden="true">
                <i class="fas fa-edit btn-focus"></i>
            </span>
            <span class="ng-value-label">{{item.Name}}</span>
            <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
        </ng-container>
    </ng-template>
</ng-select>

Я пытался использовать <ng-option>, но элемент не появился в раскрывающемся списке. Как я могу добавить дополнительный элемент из шаблона?

1 Ответ

2 голосов
/ 16 марта 2020

Вы можете использовать ng-footer-tmp для добавления дополнительных элементов в поле выбора.

Попробуйте сделать так:

. html

<ng-select [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
      <ng-template ng-footer-tmp>
               <p class="create-new" (click)="CreateNew()">Create New </p>
      </ng-template>
</ng-select>

.style. css

.create-new {
   cursor: pointer;
   padding-top:5px;
   padding-bottom:10px
}
.ng-dropdown-footer{
    border-top:unset !important;
    padding: 0px 10px !important;
}
.ng-dropdown-footer:hover {
   background-color: #f5faff;
}

Рабочая демоверсия

...