Question

我当前正在尝试实现发布在https://material.io/develop/web/components/input-controls/select-menus/上的“增强选择”示例。这是代码：

request.GET

当我尝试做类似的事情时：

    <div class="mdc-select demo-width-class">
  <input type="hidden" name="enhanced-select">
  <i class="mdc-select__dropdown-icon"></i>
  <div class="mdc-select__selected-text"></div>
  <div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
    <ul class="mdc-list">
      <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></option>
      <li class="mdc-list-item" data-value="grains">
        Bread, Cereal, Rice, and Pasta
      </li>
      <li class="mdc-list-item" data-value="vegetables">
        Vegetables
      </li>
      <li class="mdc-list-item" data-value="fruit">
        Fruit
      </li>
    </ul>
  </div>
  <span class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

当我尝试选择选项时什么也没有发生。所以我想知道我在做错什么吗？

我的目标是获得类似于“增强型增强选择”的功能，如图所示：

enter image description here

Answer 1

您知道angular-mdc吗？它已经完成了您要完成的任务。

请在此处查看增强示例： https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/select-demo/examples

您需要将此结构用于增强版本

<mdc-select>
 <mdc-menu>
  <mdc-list>
    <mdc-list-item>...

如何在角度使用mdc增强选择？

1 个答案: