Angular Material 嵌套选项组

Question

在阅读了这个 SO question 后，我发现不可能嵌套，optgroups因为它不是 HTML5 规范的一部分。可以自己应用样式，但如果可以在有角度的材料中使用，我宁愿避免这种情况。

“在引擎盖下”角材料为 div 交换了许多元素并应用了自定义样式。这让我觉得他们可能会处理这种情况。

如果我有以下代码，我希望md-optgroupwithlabel="Second level deep"进一步缩进。

普朗克

<md-input-container>
    <md-select ng-model="vm.someModel">
        <md-optgroup label="One level deep">
            <md-option>
                One level deep
            </md-option>
        </md-optgroup>
        <md-optgroup label="Another group">
            <md-optgroup label="Second level deep">
                <md-option>Two levels deep</md-option>
            </md-optgroup>
        </md-optgroup>
    </md-select>
</md-input-container>

但是，md-optgroups并非所有内容都缩进并显示相同。

这是它目前的样子：

我在演示或文档中看不到任何关于此的内容（实际上他们根本没有任何文档md-optgroup），但文档有时可能已过时/不完整。

是否可以使用不同缩进的嵌套选项组？

如果没有，使用角材料中可用的材料来实现这一目标的最佳方法是什么？我应该使用flex等吗？

我正在努力实现这样的目标：

Answer 1

经过一段时间的思考，我设法使用flex-offset.

你可以简单地应用flex-offset到md-optgroup。

我使用它flex-offset="5"是因为这看起来最明智，但任何抵消都可以。

我添加了额外的嵌套和选项以更好地阐明这一点。

更新的plunker

<md-input-container>
    <md-select ng-model="vm.someModel">
      <md-optgroup label="One level deep">
          <md-option>
              One level deep
          </md-option>
      </md-optgroup>
      <md-optgroup label="Another group">
          <md-optgroup flex-offset="5" label="Second level deep">

              <md-optgroup flex-offset="5" label="3 deep now and we want to see what happens with long text">
                <md-option>Some more options</md-option>
              </md-optgroup>

              <md-option>Two levels deep</md-option>
              <md-option>Two levels deep again</md-option>

          </md-optgroup>
      </md-optgroup>
    </md-select>
  </md-input-container>