Angular Material 嵌套选项组

Question

阅读 this SO question 后，我发现嵌套 optgroups 是不可能的，因为它不是 HTML5 规范的一部分。可以自己应用样式，但如果可以的话，我宁愿避免在 angular material.

"Under the hood" angular material 将大量元素替换为 div 并应用自定义样式。这让我觉得他们可能会处理这种情况。

如果我有以下代码，我希望 md-optgroup 和 label="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 都没有缩进和显示相同。

这是目前的样子：

我在 demos or docs 中看不到关于此的任何内容（事实上他们根本没有 md-optgroup 的任何文档），但文档有时可能不在 date/incomplete.

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

如果没有，使用 angular material 中可用的方法实现此目的的最佳方法是什么？我应该使用 flex 等

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

Answer 1

经过一段时间的思考，我设法用 flex-offset 做到了。

您只需将 flex-offset 应用于 md-optgroup。

我使用了 flex-offset="5"，因为这看起来最合理，但任何偏移都可以。

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

Updated 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>

Angular Material 嵌套选项组

Angular Material nested optgroups

html

javascript

css

angularjs

angular-material