我正在与ng-select一起工作,并且我遇到从服务器获取下拉项的情况。当我选择多个项并更改查询时,就无法查看选择了哪些项。
有什么办法可以将所有选定的项目显示在页脚中,例如下拉菜单,并且我应该能够从页脚中取消选择项目。 这是我的ng-select代码:
<ng-select class="custom" #ctx
[class.dropDownItems]="control.multiple"
[class.singleOption]="!control.multiple"
*ngIf="control"
[id]="control.id"
[items]="isAjax ? (itemsBuffer) : control.options"
[(ngModel)]="value"
[virtualScroll]="isAjax"
(scrollToEnd)="isAjax ? fetchMore(ctx.filterValue) : ''"
bindLabel="label"
[loading]="isAjax ? optionsLoading : ''"
[typeahead]="isAjax ? optionsInput$ : ''"
[title]="control.placeholder"
[disabled]="control.disabled"
[multiple]="control.multiple"
[required]="control.required"
(change)="onChange($event)"
[closeOnSelect]="!control.multiple"
[clearable]="false"
[searchable]="false">
<ng-template *ngIf="control.multiple"ng-header-tmp>
<input style="width: 100%; line-height: 24px" type="text" (input)="ctx.filter($event.target.value)" autofocus/>
<input type="checkbox" id="select1" name="select"[(ngModel)]="select" (click)="Select(ctx)"/>
<label class="form-check-label" for="select1" style="color: black;padding-left: 3px">
<b>SELECT ALL</b>
</label>
</ng-template>
<ng-template *ngIf="control.multiple" ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-2{{index}}" type="checkbox" [ngModel]="item$.selected"/>
<span style="font-size: small;padding-left: 3px">{{item.label}}</span>
</ng-template>
<ng-template *ngIf="control.multiple" ng-multi-label-tmp let-items="items" >
<div class="ng-value" *ngFor="let item of (items ? items.slice(0,1): [])">
<span class="ng-value-label">{{item.label}}</span>
</div>
<div class="ng-value" *ngIf="items.length > 1" >
<span class="ng-value-label">(+{{items.length - 1}}) </span>
</div>
</ng-template>
<ng-template >
<!--All selected items should appear here and i should be able to deSelect
items from here
</ng-template>
</ng-select>