[英]Angular 4 + Material Design chips in input
I have list of removable chips: 我有可移动芯片的列表:
<md-chip-list>
<md-chip *ngFor="let chip of chips; let i = index"
color="accent">
{{chip}}
<i class="fa fa-close" (click)="remove(i)"></i>
</md-chip>
</md-chip-list>
But I need to create them in input or in text area like in this example: 但是我需要在输入或文本区域中创建它们,如以下示例所示:
https://material.angularjs.org/latest/demo/chips https://material.angularjs.org/latest/demo/chips
How can I do that? 我怎样才能做到这一点?
Material2's md-chip
is not as mature as Material1. Material2的
md-chip
不如Material1成熟。 Material2 team is working on adding a lot of those input field features, you can check their latest example in github . Material2团队正在努力添加许多输入字段功能,您可以在github中查看其最新示例 。 Probably they will add them with beta.9 release.
可能他们会在beta.9版本中添加它们。
So, for now md-chip
with md-input
needs to manually constructed. 因此,目前需要手动构建带有
md-input
md-chip
。
Here's the example that I could get closest to the Material1's example. 这是我可以最接近Material1的示例的示例。
html: 的HTML:
<md-input-container floatPlaceholder="never">
<md-chip-list mdPrefix>
<md-chip *ngFor="let chip of chips; let i = index"
color="accent">
{{chip}}
<i class="fa fa-close" (click)="remove(i)"></i>
</md-chip>
</md-chip-list>
<input mdInput [mdDatepicker]="picker"
placeholder="Enter fruit"
[(ngModel)]="chipValue"
#chip
(keydown.enter)="add(chip.value)"
(keydown.backspace)="removeByKey(chip.value)">
</md-input-container>
ts: ts:
chipValue: string;
chips = [
'Apple',
'Orange',
'Banana',
'Mango',
'Cherry'
]
remove(item){
this.chips.splice(item, 1);
}
add(value){
this.chips.push(value);
this.chipValue = "";
}
removeByKey(value){
if(value.length < 1){
if(this.chips.length > 0){
this.chips.pop();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.