입력을 수동으로 수정하지 않으면 ng-class가 평가되지 않는 이유는 무엇입니까?

Question

모델에 바인딩 된 textarea 입력이 있습니다. 범위 함수를 실행하는 ng-change이있는 select도 있습니다. 선택을 변경하면 모델이 변경됩니다. ng-class의 함수는 모델의 원래 값과 현재 값을 비교합니다. 추가 된 클래스는 textarea의 배경을 색칠하는 데 사용되므로 현재 값 == 원래 값이면 배경이 흰색이됩니다. 그러나 여기서 이상한 점이 있습니다.

사례 1 :

1. 실행 선택 상자에서 바이올린
2. 선택 '2017년 10월 12일'. select 배경이 녹색으로 바뀌지 만 배경이 textarea 인 경우 흰색으로 유지됩니다.

사례 2 :

1. 실행 바이올린
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-더러운"거기에 당신이 입력을 변경 한 후.

당신과 같이, 모든 CSS 선택기에서 ".ng - 더러운"클래스 선택기를 제거하여 문제를 해결할 수 :

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