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

目前这是ui-select的已知问题，请参阅：https://github.com/angular-ui/ui-select/issues/277

基本上，因为ui-select具有ng-class属性，所以无法有效地应用自定义动态类。

03/08更新：我用ng-style解决了我的问题（虽然不漂亮），在控制器中设置css值（取决于你的条件）附加到范围变量（作为obj lit），或者只是硬盘在ng-style =＆＃34;＆＃34;中的html文件中对其进行编码。

UI选择多个，将CSS应用于其中一个选定项目

2 个答案: