css - 除非手动修改输入，否则为什么 ng-class 不求值？

Question

我有一个绑定(bind)到模型的 textarea 输入。我还有一个 select，它有一个 ng-change 可以触发一个范围函数。当一个人改变选择时，模型就会改变。 ng-class 上的函数正在将模型的原始值与当前值进行比较。添加的类用于为 textarea 的背景着色，这样当当前值 == 原始值时，背景为白色。但这里有一些奇怪的事情在起作用。

案例一:

1. 运行 fiddle
2. 在选择框中选择“2017-10-12”。 select 背景变为绿色(如预期的那样)，但 textarea 背景保持白色。

案例二:

1. 运行 fiddle
2. 单击 textarea 并更改值。 textarea 按预期变为绿色。键入原始值会导致 textarea 按预期变为白色。
3. 在 select 框中选择“2017-10-12”。 select 背景变为绿色，textarea 也变为绿色。 (按预期)
4. 在 select 框中选择“2017-11-01”。选择背景变为白色并且 textarea 也变为白色。 (按预期)

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

参见 jsFiddle

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