代码之家 › 专栏 › 技术社区 › Manu

在ng bootstrap Typeahead中选择多个值

angular-ui-typeahead ng-bootstrap angular-bootstrap angular

Manu · 技术社区 · 7 年前

我正在使用Angular ng引导的typeahead- https://ng-bootstrap.github.io/#/components/typeahead/examples

由于该字段是一个表单组,一旦选择了一个值,它应该可以允许下一个值,而无需删除前一个值。

1 回复 | 直到 3 年前

Lazar LjubenoviÄ 7 年前

selectItem 事件,例如: (selectItem)="selected($event)" :

selected($e) {
  $e.preventDefault();
  this.selectedItems.push($e.item);
  this.inputEl.nativeElement.value = '';
}

一旦您在集合中获得了所选项目,就可以将其显示在输入字段之前:

<div class="form-control">
  <span class="btn btn-primary btn-sm selected" *ngFor="let item of selectedItems">
    {{item}}
    <span class="close-selected" (click)="close(item)">&nbsp;x</span>
  </span>
  <input #input type="text" class="input" [ngbTypeahead]="search" (selectItem)="selected($event)" autofocus placeholder="Select something..."/>
</div>

https://plnkr.co/edit/sZNw1lO2y3ZZR0GxLyjD?p=preview

另请参阅中的详细讨论 https://github.com/ng-bootstrap/ng-bootstrap/issues/532