[英]How to disable selection or grey out the for particular value in List of value items of drop down list (<ng-selectize> or <options> ) in anguarl 7
I have scenario where i need to populate list of values for a dropdown list in angular 7 app.我有一个场景,我需要为 angular 7 应用程序中的下拉列表填充值列表。 But i should grey out the particular value from that list based on condition or flag.
但是我应该根据条件或标志将该列表中的特定值变灰。
Eg: I am populating alphabets in UI with drop down list (a to z letters)-> among them i need to disable letter "N" when user try to select that .例如:我正在使用下拉列表(a 到 z 字母)在 UI 中填充字母-> 其中,当用户尝试选择字母“N”时,我需要禁用字母“N”。
Can any one suggest me how we can do in angular 7任何人都可以建议我如何在 angular 7 中做
<ng-option [value]="item.id" [disabled]="item.disabled" *ngFor="let item of items">
<img src="./assets/{{item.image}}" width="20px" height="20px"/>
{{item.name}}
</ng-option>
Used this Code使用此代码
It could be done by binding a dynamic value to [disabled]
property.可以通过将动态值绑定到
[disabled]
属性来完成。
Component:成分:
export class AppComponent {
colors = [
{value: "Dark Green"},
{value: "Red"},
{value: "Dark Grey"},
{value: "Beige"},
];
fruits = [
{value: "Apple", disabled: false},
{value: "Passion fruit", disabled: true},
{value: "Dragon fruit", disabled: true},
{value: "Orange", disabled: false},
];
public ifColorDark(color: string): boolean {
return color.indexOf('Dark' || 'dark') !== -1;
}
}
Template:模板:
<select type="number" [(ngModel)]="selectedItem">
<option [disabled]="ifColorDark(color.value)" *ngFor="let color of colors" [ngValue]="color.value">{{ color.value }}</option>
</select>
<select type="number" [(ngModel)]="selectedItem">
<option [disabled]="fruit.disabled" *ngFor="let fruit of fruits" [ngValue]="fruit.value">{{ fruit.value }}</option>
</select>
Working example: Stackblitz工作示例: Stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.