md-select multiple正在一个接一个地显示所选选项

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

上面的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选择器（例如:nth-child，[text=]，>，+等组合）来查找这些div。

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

.thisIsMe div {
    display: inline !important;
}

---

如果上述方法均无效，则可以尝试使用javascript解决该问题，并提供一些代码以在出现div时自动为您删除这些div。

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

• 但这可能无法正常工作，也许div可能会在像这样手动删除后重新出现。我认为CSS的想法更好。