angularjs - UISelect multiple ，将 CSS 应用到所选项目之一

Question

我试图找到方法将自定义 CSS 仅应用于 UISelect Multiple 中的一个选定项目。

<ui-select id="productSelect" class="form-control" multiple ng-model="contractsHeader.ProductList" ng-click="addProductOpen()" on-select="onProductSelected($item)" on-remove="onProductRemoved($item)" ng-disabled="!selectedAdvertisers.selectedAdvertiser || !selectedAdvertisers.selectedAdvertiser.AdvertiserKey || selectedAdvertisers.selectedAdvertiser.AdvertiserKey== ' '" ng-required="true" autofocus>
            <ui-select-match>{{getProductDisplayText($item)}}</ui-select-match>
            <ui-select-choices ui-disable-choice="product.Product_Code == null" refresh="searchByTypes('Products',$select.search)" refresh-delay="0" repeat="product in products track by $index | filter:$select.search">
                <div style="cursor:pointer;" ng-if="product.Product_Code == null && securitySettings.addOtherProducts" ng-click="addProductOpen($select, $event)">&lt;{{product.Product_Description}}&gt;</div>
                <div ng-if="product.Product_Code != null">{{product.Product_Description}} ({{product.Product_Code}})</div>
            </ui-select-choices>
        </ui-select>

这是 UISelect-Match 的摘录

<ui-select-match>{{getProductDisplayText($item)}}</ui-select-match>

我尝试使用条件 ng-class 将 CSS 仅应用于一个元素，但 CSS 类从未应用于该项目。

Answer 1

<ui-select-match ng-class="(expression) ? 'class1' : 'class2'">
    {{getProductDisplayText($item)}}
</ui-select-match>

Answer 2

This is currently a known issue for ui-select please see: https://github.com/angular-ui/ui-select/issues/277

Essentially, because ui-select has ng-class properties you are unable to effectively apply your custom dynamic classes.

Update 03/08: I resolved my issue (While not pretty) with ng-style, set the css value in your controller(dependent on your condition) attached to a scope variable (as an obj lit), or simply hard code it in the html file within ng-style="" .