这是AngularJS中的正常行为吗?与 FORM 相关并在 FORM(或 INPUT)标记之前引用的 ng-class 表达式只有在该表单元素的验证状态发生更改时才正确计算(尝试在小提琴中输入有效的电子邮件)。三个相同的 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;
}