如何在 AngularJs ui-select-match 元素中的最终 html 元素上应用类？答案

【问题标题】：How to apply class on the final html element in an AngularJs ui-select-match element?如何在 AngularJs ui-select-match 元素中的最终 html 元素上应用类？
【发布时间】：2017-11-14 23:39:19
【问题描述】：

我没有在 angular-js ui-select 引导示例中得到这个：
编辑：无法直接链接到 plunker，因此使用此页面上的第五个（Bootstrap）示例：http://angular-ui.github.io/ui-select/

但在我的代码中，带有选择值的标签的宽度为：100%；来自默认 ui-select 类的属性，填充被覆盖：

.ui-select-bootstrap .ui-select-match-text {
    width: 100%;
    padding-right: 1em;
}

这会导致标签流过列表框：

我可以通过使用 width: auto 覆盖 width 属性来取消此效果；
我可以通过直接编辑元素的 html 来应用一个类。但是当类被添加到源 HTML 中时，在生成的 HTML 中找不到它。
那么我怎样才能在那里申请课程呢？

这是我的源代码：

<label class="control-label">Bronhouder</label>
<ui-select ng-model="params.bronhouder" theme="bootstrap" on-select="selectBronhouder()">
    <ui-select-match ng-class="{'listboxSelectedLabelOverflowFix': true}">{{params.bronhouder.naam}}</ui-select-match>
    <ui-select-choices repeat="item in bronhouders | filter: $select.search">
        <span ng-bind-html="item.naam | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

我尝试在 ui-select-match 元素上添加类 listboxSelectedLabelOverflowFix，但它没有出现在最终的 HTML 元素上。
这个类的效果可以通过使用ng-class来实现（编辑源代码）。但是，它会导致 Angular 内部发生冲突，并出现以下错误：

4angular.js:14328 错误：[$parse:syntax] 语法错误：令牌“{”是表达式第 35 列的意外标记 [{"selectedLabelOverflowFix":true} {'btn-default-focus':$select.focus}] 开始于 [{'btn-default-focus':$select.focus}]。 http://errors.angularjs.org/1.6.1/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=35&p3=%7BelectedLabelOverflowFix%22%3Atrue%7D%20%7B'btn-default-focus'%3A%select.focus%7D&p4 =%7B'btn-default-focus'%3A%select.focus%7D

所以看起来 Angular 生成的 html 元素上已经有另一个 ng-class 了。 ng-class 需要一个 {} 块，不能与我的块组合。

【问题讨论】：

您的插件链接无效。
@pegida 谢谢，我不知道如何直接链接 Plunker 示例。

标签： javascript html css angularjs ui-select

【解决方案1】：

我已经通过调整 ui-select 在文本元素上使用的类解决了这个问题。

.ui-select-match-text {
    width: auto !important;
}

【讨论】：