Question

阅读this SO question后，我发现嵌套optgroups是不可能的，因为它不属于HTML5规范。可以自己应用样式，但如果在角度材料中可以使用它，我宁愿避免使用它。

＆＃34;引擎盖下＆＃34;角度材料交换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或docs中看到有关此内容的任何内容（实际上他们根本没有md-optgroup的任何文档），但是文档有时可能已过时/不完整。

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

如果没有，使用角材料可用的最佳方法是什么？我应该使用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嵌套的optgroups

1 个答案: