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

Question

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

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

这是我正在研究的plunker 。

为此，我需要覆盖 ng-input 模板中的 tag-item 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;
}

这是您的 plunkr 修改以实现这一点。