从下拉列表中选择多个项目以填充页面

Question

我正在不同面板中显示数组中的数据，用户可以选择从视图中删除面板，并在下拉菜单中填充已删除的面板。用户可以灵活地选择多个面板标题，以使用所选面板重新填充页面。

目前我可以删除面板 - 将它们推送到一个新阵列并使用已删除的面板标题填充下拉列表。

我正在使用bootstrap和angular - 此时我无法正确显示下拉菜单，因为它应该并且不确定是什么问题....这是我的下拉列表的HTML：

<select multiple>
  <option *ngFor="let item of dropdownlist">{{item.title}}</option>
</select>

这只是显示为一个空矩形，当我删除一个面板时，标题显示在下拉列表中，但似乎缺少样式

这就是我希望它的样子：

这也是我如何删除并添加面板到数组：

<a title="Remove Panel" (click)="removePanel(i);">
   <i class="glyphicon glyphicon-remove"></i>
</a>

removePanel(index: number): void {
    this.dropdownlist.push(new Object(this.items.splice(index, 1)[0]));
    }

dropdownlist: Array<any> = [];

items: Array<Panel> = [
        new Panel(1, 'panel 1', 'show text', 'test data in modal'),
        new Panel(2, 'panel 2','show image', 'more test data'),
        new Panel(3, 'panel 3', 'show graph', 'more and more data')
    ];

我也不确定我的添加功能从下拉菜单看起来如何，并且与我的removePanel函数相反？

Answer 1

这不是您的问题的答案，但我建议您使用select2

Answer 2

另一种选择是使用Bootstrap多选插件，这里是演示的链接：

http://davidstutz.github.io/bootstrap-multiselect/

这是github回购：

https://github.com/davidstutz/bootstrap-multiselect

它非常好，我推荐它，如果您决定稍后再次配置它，它还为您提供了更多选项，并且因为您已经将它包含在项目中，您可以在任何地方使用它需要它。

我不认为你能够在不使用插件的情况下自然地实现这一目标。