如何在ngTagsInput中设置标签的颜色? [英] How to set coloring of tags in ngTagsInput?

问题描述

我想在项目中使用ng-tags-input.

I want to use ng-tags-input in my project.

我尝试根据数组中的颜色属性对象为每个标签设置不同的颜色.

I try to set diffrent color for each tag according to color property object in array.

这里是 plunker 我正在研究.

为此，我需要在ng-input模板中覆盖tag-item css类.

For this purpose I need to override tag-item css class in ng-input template.

以下是ng-input模板的示例:

Here is the example of ng-input template:

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

在这一行中，我尝试覆盖标签输入css类:

in this row I try to override tags-input css class:

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

这是我得到的结果:

如您所见，左右边缘未着色.

as you can see on left and right edges not colored.

知道我在做什么错吗?以及如何覆盖标签输入css类?

Any idea what I am doing wrong?And how to override the tags-input css class??

推荐答案

如果查看标记，您会发现将应用背景颜色样式的.tags-input div嵌入到li元素中，其底边和右侧边距均为5px.这就是为什么颜色未应用在按钮的整个宽度上的原因.

If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.

因此，请确保在ng-tags-input样式表后之后应用您自己的样式表，并覆盖一些CSS规则，以使li没有填充，并且div带有取而代之的是填充的背景颜色:

So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:

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

在这里您修改了plunkr 即可实现这一目标.

Here's your plunkr modified to make that happen.

这篇关于如何在ngTagsInput中设置标签的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！