我正在自定义角度材料选择/自动完成,以允许嵌套下拉。
在这里,我想有一个家长下拉多个孩子。 如果展开特定的父下拉列表,则只有该下拉列表的子下拉列表才应该展开或折叠。 类似地,在相同的方案中应选中复选框事件。
我面临两个问题。
谁能帮我一下我错过了什么。
这是我的密码。 斯塔克布利茨
参考资料:
https://stackblitz.com/edit/angular-evacck-qubgyy
https://stackblitz.com/angular/eboprqqnooy
null
export class SelectCustomTriggerExample {
toppings = new FormControl();
isExpandCategory: boolean = false;
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
states = new FormControl();
expandDocumentTypes(category) {
console.log("expanding dropdown", category);
this.isExpandCategory = !this.isExpandCategory;
}
stateList: StateGroup[] = [{
letter: 'A',
names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
}, {
letter: 'C',
names: ['California', 'Colorado', 'Connecticut']
}, {
letter: 'D',
names: ['Delaware']
}, {
letter: 'F',
names: ['Florida']
}, {
letter: 'G',
names: ['Georgia']
}, {
letter: 'H',
names: ['Hawaii']
}, {
letter: 'I',
names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
}, {
letter: 'K',
names: ['Kansas', 'Kentucky']
}, {
letter: 'L',
names: ['Louisiana']
}, {
letter: 'M',
names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
'Minnesota', 'Mississippi', 'Missouri', 'Montana']
}, {
letter: 'N',
names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
'New Mexico', 'New York', 'North Carolina', 'North Dakota']
}, {
letter: 'O',
names: ['Ohio', 'Oklahoma', 'Oregon']
}, {
letter: 'P',
names: ['Pennsylvania']
}, {
letter: 'R',
names: ['Rhode Island']
}, {
letter: 'S',
names: ['South Carolina', 'South Dakota']
}, {
letter: 'T',
names: ['Tennessee', 'Texas']
}, {
letter: 'U',
names: ['Utah']
}, {
letter: 'V',
names: ['Vermont', 'Virginia']
}, {
letter: 'W',
names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
}];
}
html lang-html prettyprint-override"><mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select [formControl]="states" multiple>
<mat-select-trigger>
{{states.value ? states.value[0] : ''}}
<span *ngIf="states.value?.length > 1" class="example-additional-selection">
(+{{states.value.length - 1}} {{states.value?.length === 2 ? 'other' : 'others'}})
</span>
</mat-select-trigger>
<mat-optgroup *ngFor="let group of stateList">
<div>
<mat-checkbox [checked]="group.selected" (change)="toggleSelection(user)"
(click)="$event.stopPropagation()">
{{group.letter}}
</mat-checkbox>
<button mat-button (click)="expandDocumentTypes(group)">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</div>
<mat-option *ngFor="let name of group.names" [value]="name"
[ngClass]="isExpandCategory ? 'list-show' : 'list-hide'">
{{name}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
null
在选择这些值之后,它应该看起来像下面(+1或2.其他)。
下面是您的2&; 3分。 https://stackblitz.com/edit/angular-f5mizr-9fpccz
对于第1点,您可以使用mat-autocomplete
实现相同的解决方案,因为使用mat-select
无法实现自动完成
问题内容: 我创建了一个客户c#DropDownList控件,可以将其内容呈现为optgroup(不是从头开始,我编辑了一些在Internet上找到的代码,尽管我确切地了解了它的作用),并且工作正常。 但是,我现在遇到一种情况,我需要在下拉菜单中有两个缩进级别,即 但是,在上面的示例代码段中,它呈现的缩进量与相同。 有没有一种方法可以产生我想要的嵌套optgroup行为? 问题答案: 好的,如果有
如果你的程序是有主要组件和附加组件,而主要组件是必选项的话,可以在组件名称 Section "主程序(必选)" SEC01 下面添加以下代码: SectionIn RO 效果如图:
在Bootstrap 4中,我们已经加了一系列的全局选项,让你能够在项目中轻松定制所有的组件。这些选项通过Sass变量来处理。通过内置的Gruntfile,可以简单改变一个变量的值,并重新编译。 可用的变量 您可以在_variables.scss文件找到这些变量并自定义这些变量。 变量 值 Description $spacer 1rem (默认), 或者任何大于0的值 为间隔工具指定默认的间隔值
我有一个select字段,里面有一些选项。现在我需要使用jQuery选择其中一个选项。但当我只知道必须选择的选项的值时,我怎么能那样做呢? 我有以下HTML: null null 我试着用一个标签来做这个,但这不起作用。 请告诉我其他的方法。 提前致谢
我将html写成 现在我希望如果选项是1,那么它应该被选择为 请帮帮我!!!
问题内容: 我正在使用Django 1.0.2。我已经写了一个由模型支持的ModelForm。此模型具有一个ForeignKey,其中blank = False。当Django为该表单生成HTML时,它会创建一个选择框,其中对ForeignKey引用的表中的每一行都有一个选项。它还在列表顶部创建一个没有值的选项,并显示为一系列破折号: 我想知道的是: 从选择框中删除此自动生成的选项的最干净的方法是
问题内容: 我希望有一个输入字段,用户可以输入自定义文本值或从下拉菜单中选择。普通只提供下拉选项。 我如何才能接受自定义值?例如:福特? 问题答案: HTML5具有内置的组合框。您创建一个文本和一个。然后,您向中添加一个属性,其值为的。 更新: 自2019年3月起,所有主要浏览器(现在包括Safari12.1和iOSSafari12.3)都支持此功能所需的级别。有关详细的浏览器支持。 看起来像这样
我想调用一个函数时,选择的任何选项。类似于这样: 但不知何故不起作用。有人能帮忙吗。 请注意 我不想捕获更改事件,如果我选择已经选择选项,则不会触发更改事件