ngTagsInput'ta etiketlerin renklendirilmesi nasıl ayarlanır?

Question

Projemde ng-etiket girişi kullanmak istiyorum.

Dizideki color özelliği nesnesine göre her etiket için farklı renk ayarlamayı denerim.

İşte ben plunker üzerinde çalışıyorum.

Bu amaçla ng giriş şablonunda etiket öğesi css sınıfını geçersiz kılmam gerekiyor. Ben olsun

<div class="tags-input" ng-style="{background: data.color}"> 

Ve burada sonucudur: Etiketlerin giriş css sınıfını geçersiz kılmak için deneyin bu satırdaki

<script type="text/ng-template" id="tag-template"> 
     <div class="tags-input" ng-style="{background: data.color}"> 

     <span>{{$getDisplayText()}}</span> 
     <a class="remove-button" ng-click="$removeTag()">&#10006;</a> 
    </div> 

: Burada

ng giriş şablonunun örneğidir

Eğer renkli değil sağ ve sol kenarlarında görebileceğiniz gibi

.

Neyi yanlış yaptığım hakkında bir fikrin var mı? Etiketler-giriş css sınıfa nasıl yazılır?

Answer 1

İşaretlemeye bakarsanız, arka plan renk stilinizi uygulayacağınız .tags-input div'in 5px'lik bir dik ve sağ dolguya sahip bir li öğesinin içine gömüldüğünü görürsünüz. Bu nedenle, düğmenin tam genişliğinde renk uygulanmaz.

Yani, hiçbir dolgusunun olması li için sırayla sonra ng-etiketler-giriş stil kendi stil uygulamak ve bazı CSS kuralları geçersiz kılmak için emin ve arka plan rengi ile div var yapmak bir yerine padding:

/* override default tag styles for colors to look less ugly */ 
tags-input .tags .tag-item { 
    padding: 0; 
    height: 27px; 
} 

.tags-input { 
    padding: 0 5px; 
    border-radius: 2px; 
} 

İşte bunun gerçekleşmesi için your plunkr modified bu.