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

您需要在[{1}}代码中传递[value]，而不是<md-option>代码。

例如，这有效：

<md-select>

然后在你的HTML中

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

Answer 2

这是另一个可能看起来更像你的样子的例子......

您需要在[value]代码中传递<md-option>，而不是<md-select>代码。

您可以使用[(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>

angular2材料设计中的下拉列表复选框

2 个答案: