在页脚模板上显示选定的项目,并允许从页脚中取消选择(ng-Select)

时间:2019-03-24 19:15:47

标签: angular select drop-down-menu angular-ngselect

我正在与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>

0 个答案:

没有答案