角嵌套下拉列表

Question

我正在尝试在Angular中创建一个包含子项的下拉列表（如图像中所示，但所有选项均可选）。是否有人知道如何使用标记在Angular中实现此目的，这样我就不必更改应用程序内的其他代码，就像更改为无序列表等一样。

谢谢：）

dropdown list with sub-items

3 个答案:

答案 0 :(得分：1)

考虑使用Angular/Material库提供的选项组。参见demo。

答案 1 :(得分：0)

使用class= "dropdown-submenu"

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

或参考此https://mdbootstrap.com/support/general/how-to-create-a-nested-dropdown/

答案 2 :(得分：0)

分组子项目可以使用角形材料库来实现。

对于多选下拉列表，您只需要在select标签元素中添加multiple属性即可选择多个选项。

请参见stackblitz demo供参考。

有关使用角形材料的更多此类功能，请参阅angular material

相关问题

• 嵌套下拉列表
• 嵌套下拉列表无效
• Mysql嵌套下拉列表
• 角度中的大型嵌套下拉列表
• Bootstrap下拉延长下拉列表（嵌套）
• Angular 4嵌套下拉列表
• bootstrap 4嵌套下拉列表
• HTML / CSS嵌套下拉列表
• 角度CDK拖放：嵌套的下拉列表
• 角嵌套下拉列表

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

考虑使用Angular/Material库提供的选项组。参见demo。

Answer 2

使用class= "dropdown-submenu"

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

或参考此https://mdbootstrap.com/support/general/how-to-create-a-nested-dropdown/

Answer 3

分组子项目可以使用角形材料库来实现。

对于多选下拉列表，您只需要在select标签元素中添加multiple属性即可选择多个选项。

请参见stackblitz demo供参考。

有关使用角形材料的更多此类功能，请参阅angular material