これは AngularJS の通常の動作ですか? FORM に関連し、FORM (または INPUT) タグの前に参照される ng-class 式は、そのフォーム要素の検証ステータスが変更された場合にのみ正しく計算されます (フィドルで有効な電子メールを入力してみてください)。タグの前に異なる式の計算を示し、電子メール入力編集後に正しい値を示す 3 つの同一の H2-s ({{TestForm.Email.$valid}} は両方のケースで正しい値を示していることに注意してください):
JSFiddle: http://jsfiddle.net/nEzpS/26/
HTML:
<div ng-controller="TestController">
<h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>
<form name="TestForm" ng-submit="formSubmit()">
<input type="email" class="input-xlarge" maxlength="100"
name="Email"
ng-model="Client.Email"
ng-required="true" ng-maxlength="100"
>
</form>
<h2 class="someInitialClass" ng-class="TestForm.Email.$valid && 'classOK' || 'classError'">Email field validation result is <b>{{TestForm.Email.$valid}}</b></h1>
<br/><br/>
<ul ng-repeat="FormItem in TestForm">
<li>{{$index}} {{FormItem.$error}}
</li>
</ul>
<br/><br/>
</div>
JS:
function TestController($scope) {
}
CSS:
.someInitialClass {
font-family: Helvetica;
}
.classError {
color:red;
}
.classOK {
color: green;
}