除非手动修改输入，否则为什么 ng-class 不评估？答案

【问题标题】：Why doesn't ng-class evaluate unless the input is modified manually?除非手动修改输入，否则为什么 ng-class 不评估？
【发布时间】：2017-01-13 02:13:04
【问题描述】：

我有一个绑定到模型的textarea 输入。我还有一个选择，它有一个ng-change，它会触发一个作用域函数。当一个人改变选择时，模型就会改变。 ng-class 上的功能是将模型的原始值与当前值进行比较。添加的类用于为textarea 的背景着色，这样当当前值== 原始值时，背景为白色。但这里有一些奇怪的东西。

案例一：

演奏小提琴
在选择框中选择“2017-10-12”。 select 背景变为绿色（如预期），但 textarea 背景保持白色。

案例 2：

演奏小提琴
单击textarea 并更改值。 textarea 按预期变为绿色。输入原始值会导致 textarea 按预期变为白色。
在select 框中选择“2017-10-12”。 select 背景变为绿色，textarea 也变为绿色。（按预期）
在select 框中选择“2017-11-01”。选择背景变为白色，textarea 也变为白色。（按预期）

为什么案例 #1 不起作用？

见jsFiddle

【问题讨论】：

使用版本 1.5.7 虽然小提琴是 1.4.8。

标签： css angularjs ng-class

【解决方案1】：

这是关于脏检查和围绕它的 CSS：

.form-control.ng-dirty.ng-valid, select.ng-dirty.ng-valid {
  background-color: $formDirtyValid;
}

.form-control.ng-dirty.ng-valid.nochange, select.ng-dirty.ng-valid.nochange {
  background-color: $formBack ;
}

在您更改输入后，输入元素上只会有一个“ng-dirty”类。

您可以通过从所有 css 选择器中删除“.ng-dirty”类选择器来修复它，如下所示：

.form-control.ng-valid, select.ng-valid {
  background-color: $formDirtyValid;
}

.form-control.ng-valid.nochange, select.ng-valid.nochange {
  background-color: $formBack ;
}

https://jsfiddle.net/evmt2c56/15/

【讨论】：