angular2材質設計中的下拉列表復選框

Question

我想創建一個帶有復選框的下拉列表，以便用戶可以使用Material Design在Angular 2中選擇多個選項。

默認情況下，我想選中所有復選框。 我們如何做到這一點？

這是我的代碼，適用於創建帶有復選框的DDL：

<md-select multiple placeholder="Section List" [value]="section" options="true"  (ngModelChange)='checkedSection();'>   
   <md-option *ngFor ="let section of selectedSectionList"  >
     {{section.sectionTitle}}
</md-option>

謝謝，

Answer 1

您需要在[ <md-option>標記而不是<md-select>標記中傳遞[value]。

例如，這有效：

 sectionsSelected = ['A', 'B', 'C', 'D'];
 AllSections = ['A', 'B', 'C', 'D'];

然后在你的HTML

<md-select multiple placeholder="Section List" 
[(ngModel)]="sectionsSelected">
  <md-option *ngFor ="let section of AllSections" [value]="section">
    {{section}}
  </md-option>
</md-select>

Answer 2

這是另一個例子，看起來可能更像您的樣子...

您需要在[value] <md-option>標記而不是<md-select>標記中傳遞[value] 。

您可以使用[(ngModel)]來實現雙向數據綁定，該數據綁定最初包含所有選項的完整集合。 該變量將根據用戶輸入而改變。 如果用戶取消選中一個框，則該值將被刪除。

因此，我們需要另一個變量來迭代這些選項，以便它們在未選中時仍然顯示。

然后，您可以使用* ngFor遍歷另一個包含所有要顯示選項的變量。

selectedSectionList = [{'sectionTitle': 'Title 1', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 2', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 3', 'sectionOther': 'awesome stuff'},
    {'sectionTitle': 'Title 4', 'sectionOther': 'awesome stuff'},
  ];

  sectionsSelected = this.selectedSectionList;

您的HTML看起來像這樣

<md-select multiple placeholder="Section List" [(ngModel)]="sectionsSelected">
  <md-option *ngFor ="let section of selectedSectionList" [value]="section">
    {{section.sectionTitle}}
  </md-option>
</md-select>