md-select multiple 显示一个在另一个下方的选定选项

Question

我正在使用 angularjs 材料 1.1.0。在带有 multiple=true 的 md-select 中，所选选项将显示在另一个下方，如下所示：

当我查看创建的 HTML 时，不知何故，一个额外的 div 被添加到多选 html 中，如下所示：

<md-select-value class="md-select-value" id="select_value_label_127"><span><div class="md-container"><div class="md-icon"></div></div><div class="md-text ng-binding">Standtag</div>, <div class="md-container"><div class="md-icon"></div></div><div class="md-text ng-binding">Umsatzsteuer</div>, <div class="md-container"><div class="md-icon"></div></div><div class="md-text ng-binding">Verkaufspreis effektiv ohne Umsatzsteuer</div></span><span class="md-select-icon" aria-hidden="true"></span></md-select-value>

<div class="md-container"><div class="md-icon"></div></div>

上面的 div 正在被添加，这就是导致所选项目按行显示的原因，而不是用逗号分隔的单行。当我删除 abve div 时，所选选项以正确的格式显示。当我查看 angularjs 网站时，那个 div 不存在。我无法弄清楚为什么要添加这个额外的 div。

Answer 1

您可以尝试通过几个选项来解决此问题：

• 直接针对这些 div 设置 CSS 规则并将它们设置为 display: inline
• 尝试为这些 div 的父级设置 display: flex CSS 规则，希望这样它们会自动内联，没有换行符 (see here for more info on this)

由于这些 div 是自动创建的，因此似乎很难对它们应用自定义 CSS 规则，因为您不能直接将自己的 CSS 类添加到这些 div。

但是，您可能可以使用复杂 CSS 选择器的组合找到这些 div，例如 :nth-child、[text=]、>、+ 等。

例如，假设这些 div 的容器有一个类.thisIsMe，那么你可以这样做：

.thisIsMe div {
    display: inline !important;
}

---

如果上述方法都不起作用，您可以尝试使用 javascript 解决它，使用一些代码在这些 div 出现时自动为您删除。

• 也许在on-change 事件中。您可能必须在 $scope.$evalAsync 或 $timeout 中包含您对 div 的删除，因为 angularjs 通常不会同步应用界面渲染更新。

• 但这可能行不通，也许像这样手动删除后 div 可能会重新出现...我认为 CSS 的想法更好。