我正在使用@ng select/ng-select@2.3.6在我的应用程序中,我有一个很长的文本数组。
所以,完整的文本在下拉列表中不可见,所以我想在每个选项上显示标题/工具提示
我试过了,
let listArray = [{name: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s'}];
<ng-select placeholder="Select" (change)="onChange($event)">
<ng-option *ngFor="let list of listArray"
title="{{list.name}}"> {{list.name}} </ng-option>
</ng-select>
但运气不好
您可以使用以下代码实现工具提示解决方案
<ng-select [items]="listArray" bindLabel="name" bindValue="name">
<ng-template ng-option-tmp let-item="item">
<div title="{{item.name}}">{{item.name}}</div>
</ng-template>
</ng-select>
感谢
您可以在<ng-option>
中放入一个模板,并添加指令ng-option-tmp
:
<ng-select [items]="listArrayManyElements" placeholder="Select" [(ngModel)]="Selected"
bindLabel="name" bindValue="name">
<ng-template ng-option-tmp let-item="item">
<div [title]="item.name">{{item.name}}</div>
</ng-template>
</ng-select>
我已经更新了你的堆叠式
您可以使用@ng bootstrap/ng bootstrap库与ng select并行显示工具提示:
模板:
<ng-select [ngbTooltip]="tipContent" container="body" placement="bottom" placeholder="Select" (change)="onChange($event)">
<ng-option *ngFor="let list of listArray" title="{{list.name}}"> {{list.name}}
</ng-option>
</ng-select>
<ng-template #tipContent>{{listArray[0].name}}</ng-template>
ts:
listArray = [
{name: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
];
演示
我添加了一个演示,只使用引导程序,没有外部库。将鼠标悬停在选项上以查看工具提示(需要几秒钟才能显示(:新的演示
这个问题很老,但使用span可能是另一种解决方案:
<ng-select placeholder="Select" (change)="onChange($event)">
<ng-option *ngFor="let list of listArray"
title="{{list.name}}"><span [title]="list.name">{{list.name}}</span></ng-option>
</ng-select>
您可以创建这样的自定义指令:
import { ContentChild, Directive, ElementRef, OnInit } from '@angular/core';
import { NgSelectComponent } from "@ng-select/ng-select";
@Directive({
selector: '[admSelectTitle]'
})
export class SelectTitleDirective implements OnInit {
@ContentChild(NgSelectComponent) select: NgSelectComponent;
@ContentChild(NgSelectComponent, { read: ElementRef }) selectNative: ElementRef;
/**
* @inheritDoc
*/
ngOnInit() {
if (!this.select) {
return;
}
const nativeElement = this.selectNative.nativeElement;
nativeElement.addEventListener("mouseover", function() {
const listOfPickedElements = nativeElement.querySelectorAll('.ng-value-label.ng-star-inserted');
listOfPickedElements.forEach((el) => {
el.setAttribute('title', el.innerHTML);
})
const listOfAvailableOptions = nativeElement.querySelectorAll('.ng-dropdown-panel-items.scroll-host .ng-option.ng-option-marked');
listOfAvailableOptions.forEach((v) => {
v.setAttribute('title', v.innerText)
})
})
}
}
之后你可以简单地使用它:
<ng-select admSelectTitle [items]="yourItems" bindLabel="name" bindValue="id" class="anyClass" formControlName="anyName" [multiple]="true">
<ng-template ng-option-tmp let-item="item">
{{ item.name }}
</ng-template>
</ng-select>
现在有关于ng-select和ng-options元素的工具提示。抱歉英语不好=(
<ng-select placeholder="Select" (change)="onChange($event)">
<ng-option *ngFor="let list of listArray">
<div title="{{list.name}}">
{{list.name}}
</div>
</ng-option>
</ng-select>
在我的案例中,问题的解决方案是添加"FormsModule";到导入";NgSelectModule";
你的模块应该是这样的:
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
NgSelectModule,
]
在我的例子中,我使用ngx-bootstrap和ng-select。这是在此处输入图像描述的示例
<div>
<ng-template #itemTol>
{{getTooltips(items, value)}}
</ng-template>
<ng-select [items]="items" #ngitem[clearable]="false" [tooltip]="itemTol" [isDisabled]="ngitem.isOpen" bindLabel="text" bindValue="value" placeholder="Please select" name="sales_agent" formControlName="name">
<ng-template ng-option-tmp let-item="item">
<div [tooltip]="item.text" placement="bottom">{{item.text}}</div>
</ng-template>
</ng-select>
</div>