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

Question

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

案例 1：

运行 fiddle
Select select 框中的“2017-10-12”。 select 背景变为绿色（如预期的那样），但 textarea 背景保持白色。

案例二：

运行 fiddle
单击 textarea 并更改值。 textarea 按预期变为绿色。输入原始值会导致 textarea 按预期变为白色。
在 select 框中选择“2017-10-12”。 select 背景变为绿色并且 textarea 也变为绿色。（按预期）
在 select 框中选择“2017-11-01”。 select 背景变白，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 ;
}

在您更改输入后，输入元素将只有一个 class "ng-dirty"。

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

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

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

Why doesn't ng-class evaluate unless the input is modified manually?

css

angularjs

ng-class