javascript - ng-select : add an extra option
问题描述
How can I add an extra item to my ng-select dropdown like the Create New in the following image
:
This is the current code I have:
<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>
I tried using <ng-option>
but the item didn't appear in the dropdown.
How can I add an extra item form the template?
解决方案
You can use [addTag]
and addTagText
.
[addTag]
: Allows to create custom options.addTagText
: Set custom text when using tagging.
app.component.html :
<ng-select [items]="cities"
bindLabel="name"
placeholder="Select city"
[(ngModel)]="selectedCity"
addTagText="Create New"
[addTag]="CreateNew">
</ng-select>
app.component.ts :
export class AppComponent {
cities = [
{id: 1, name: 'City1'},
{id: 2, name: 'City2'},
{id: 3, name: 'City3'},
{id: 4, name: 'City4'},
{id: 5, name: 'City5'}
];
CreateNew(city){
alert("Create New Clicked : "+city)
}
}
Pictures :
2.
推荐阅读
- c# - EmguCV (OpenCV) ORBDetector 只发现错误的匹配项
- php - 为什么我在使用 PHP 生成的 XML 文件中出现错误
- sql-server - 当辅助表在左连接中返回空值时从主表获取记录
- python - 如何在峰值上绘制索引号值的时间序列?
- css - Visual Studio 的 SCSS 编译器扩展
- java - 在主布局顶部自动弹出一个对话框
- java - java jvm 11 无法启动
- android - 为旧版操作系统设置通用按钮样式
- ionic-framework - 由于 es6 代码未转译 android 5.1.1,模拟器和设备上出现白屏
- python - 从数据框中的数组制作散点图