angularjs - 如何在 ngTagsInput 中设置标签的颜色？

Question

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

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

这里是 plunker我正在努力。

为此，我需要覆盖 ng-input 模板中的标签项 css 类。

这里是 ng-input 模板的例子:

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

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

这是我得到的结果:

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

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

Answer 1

如果您查看标记，您会看到应用背景颜色样式的 .tags-input div 嵌入到 li 元素中，该元素的左右填充为5px。这就是颜色未应用于按钮的整个宽度的原因。

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

/* 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实现这一目标。