從下拉列表中選擇多個項目以填充頁面

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')
    ];

我也不確定我的add函數從下拉列表到項目的外觀如何，並且與removePanel函數相反？

Answer 1

這不是你的問題的答案，但我建議你使用select2

Answer 2

另一種選擇是使用Bootstrap多選插件，這里是演示的鏈接：

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

這是github回購：

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

它非常好，我推薦它，如果您決定稍后再次配置它，它還為您提供了更多選項，並且因為您已經將它包含在項目中，您可以在任何需要的地方使用它。

我不認為你能夠在不使用插件的情況下自然地實現這一目標。