Показать выбранные элементы в шаблоне нижнего колонтитула и разрешить отмену выбора из нижнего колонтитула (ng-Select) - PullRequest
Новая
       43

Показать выбранные элементы в шаблоне нижнего колонтитула и разрешить отмену выбора из нижнего колонтитула (ng-Select)

0 голосов
/ 24 марта 2019

Я работаю с ng-select, и у меня есть сценарий, в котором я получаю выпадающие элементы с сервера. Когда я выбираю несколько элементов и меняю запрос, то нет способа увидеть, какие элементы выбраны.

isВ любом случае все выбранные элементы должны отображаться в нижнем колонтитуле, например, в раскрывающемся списке, и я могу отменить выбор элементов в нижнем колонтитуле.Вот мой код 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>
...