0

UISelect Multiple で選択した項目の 1 つだけにカスタム CSS を適用する方法を見つけようとしています。

<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 を 1 つの要素のみに適用しようとしましたが、そのアイテムに CSS クラスが適用されることはありません。

4

2 に答える 2

1 
<ui-select-match ng-class="(expression) ? 'class1' : 'class2'">
    {{getProductDisplayText($item)}}
</ui-select-match>
于 2015-03-06T14:21:37.713 に答える
1

これは現在、ui-select の既知の問題です: https://github.com/angular-ui/ui-select/issues/277を参照してください。

基本的に、ui-select には ng-class プロパティがあるため、カスタム動的クラスを効果的に適用することはできません。

更新 03/08: ng-style で問題を解決しました (きれいではありませんが)、スコープ変数 (obj lit として) にアタッチされたコントローラー (条件に応じて) に css 値を設定するか、単純にハードコードしますng-style="" 内の html ファイル。

于 2016-03-09T21:26:05.327 に答える