ngTagsInputでタグの色付けを設定する方法は？

Question

私のプロジェクトでng-tags-inputを使いたいです。

配列のカラープロパティオブジェクトに応じて、各タグに異なる色を設定しようとしています。

ここには私が取り組んでいるplunkerです。

この目的のために、ng-inputテンプレートでtag-item cssクラスをオーバーライドする必要があります。私が手

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

そして、ここでの結果である：私は、タグ入力のCSSクラスを上書きしようと、この行の

<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> 

：ここ

はNG-入力テンプレートの一例である

左端と右端に色が付いていません。

私が間違っていることはありますか？また、タグ入力cssクラスをオーバーライドする方法はありますか？

Answer 1

マークアップを見ると、バックグラウンドカラースタイルを適用する.tags-input divが、li要素に埋め込まれていることがわかります。これは、5pxの右揃えと右側のパディングがあります。そのため、ボタンの幅全体にカラーが適用されません。だから、

、後NG-タグ入力スタイルシートを独自のスタイルシートを適用することを確認してください、とliはパディングを持たないようにするためであり、持っている背景色でdivのためのいくつかのCSSルールを上書き代わりに埋め込み：

/* 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; 
} 

ここにはyour plunkr modifiedがあります。