ng-class被覆盖输入标记

Question

我有以下代码

ncol

在CSS中，

<input  type = "text" ng-class = "{'same-method2': true}" />

但颜色不会改变。被检查的元素具有正确的样式，但是水平划掉。

我可以使用ng-style标签，但我似乎无法根据输入动态更改颜色。 那么为什么没有为这个简单的代码工作呢？是什么导致了这个问题？

Answer 1

这意味着您的样式会被另一个类或本地样式覆盖。您必须找到活动背景或背景颜色样式（您可以在检查器中找到它）并使其优先级低于同一方法2类。

如果要根据输入内容更改颜色，可以使用两种解决方案：

• 要么每种颜色允许定义一个类，
• 或您使用ngStyle

使用课程：

<input type="text" ng-model="myColor" class="{{myColor}}" />

然后，在你的CSS中：

.blue{
    background-color: #222288;
}

如果您在输入中键入“蓝色”，它将变为蓝色。

使用ngStyle：

<input type="text" ng-model="myColor" ng-style="{ 'background-color': myColor }" />

如果在输入中键入＃222288，它将变为蓝色。

Answer 2

您可以通过多种方式使用ng-class，如果您希望它有条件地工作，您可以使用三元运算符，如下所示：

 ng-class="myCondition ? 'true-color' : 'false-color'">

基于myCondition它适用＆＃39;真彩色＆＃39;或者“假色”＆＃39;班级

Answer 3

总是最强的CSS规则会“赢”，例如：我猜输入标签还有另一种定义颜色的样式。 尝试使用更强大的规则，如：

#mydiv input.same-method { color: #16a085; }

应该有所帮助。