角度多选下拉菜单 [英] Angular multi select dropdown
问题描述
我想使用 bootstrap 4 设计一个多选下拉功能，如下图.
以下是我目前的实现.
<label>员工特权</label><select id="employeePrivelege" data-style="btn-default"class="selectpicker 表单控件"formControlName="employeePriveleges"多个数据最大选项=2"><选项选择>芥末</option><选择的选项>烧烤</option></选择>我有两个问题
- 如果在
option 上添加
selected 属性，则不会选择元素我知道这是因为我不使用 jQuery 并且我不想添加 JQuery，因为在 Angular 中不推荐这样做.
我的问题是
- 使用或不使用引导程序 4 在 Angular 中实现多下拉 UI 组件的最简单选项是什么
我尝试了您的代码，但 selected 属性对我来说效果很好.
我在 w3schools 创建了一个片段，表明它有效:链接到片段
看起来它没有被选中，因为选中的选项是灰色的，因为控件处于非活动状态.如果您添加另一个未选中的选项，您可以看到不同之处.我在此处创建了另一个片段.
我的简化代码如下所示:
我还发现了一个很好用的 Angular 组件:
https://www.npmjs.com/package/ng-multiselect-dropdown
我用你的数据创建了一个 stackblitz 演示组件这里
我希望这能进一步帮助您.
I would like to design a multi select drop down functionality in angular using bootstrap 4. Following is the image below.
Following is my implementation as of now.
<div class="form-group">
<label>Employee privilege</label>
<select id="employeePrivelege" data-style="btn-default"
class="selectpicker form-control"
formControlName="employeePriveleges"
multiple data-max-options="2">
<option selected>Mustard</option>
<option selected>Barbecue</option>
</select>
</div>
I have 2 problems
- An element is not selected if I add the
selectedattribute onoption
I know this is happening because of the fact that I do not use jQuery and I do not want to add JQuery as this is not recommended in Angular.
Questions I have is
- What is the simplest option of implementing a multiple dropdown UI component in Angular with or without bootstrap 4
I tried your code but the selected attribute works fine for me.
I created a snippet at w3schools that shows that it works: link to snippet
It looks like it's not selected because the selected options are greyed out because the control is inactive. If you add another option however that is not selected, you can see the difference. I created another snippet here.
My simplified code looks like that:
<select name="Sauces" multiple>
<option value="Mustard">Mustard</option>
<option selected value="Barbecue">Barbecue</option>
<option value="Ketchup">Ketchup</option>
<option selected value="Mayonaise">Mayonaise</option>
</select>
Also I found an Angular component which works great:
https://www.npmjs.com/package/ng-multiselect-dropdown
I created a stackblitz demonstrating the component with your data here
I hope this helps you further.
这篇关于角度多选下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
