angularjs - 在 AngularJS 中重用 ngClass 指令

Question

我正在尝试验证表单，但 html 页面中的逻辑太多了。我已经在使用 ngMessages，因为没有它就毫无希望了。

我正在像这样做 ng-class 的对象变体

ng-class="{ 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }"

如您所见，上述行中已经有很多代码。我必须使用这个指令 6 次，所以我现在唯一的选择是复制粘贴到其他 5 个地方。我尝试做这样的事情，但没有奏效

<form ng-init="formGroupClassObject = { 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }">

<div class="form-group" ng-class="formGroupClassObject"></div>

我不明白为什么这不起作用。您对上述代码的重用能力还有其他建议吗？

Answer 1

怎么样:

ng-class="getFormClasses(registerForm)"

在您的通用 Controller 中:

$scope.getFormClasses = function(form) {
  if (!form) { return; }
  return {
    'has-error'  : form.username.$invalid && form.username.$touched,
    'has-success': form.username.$valid   && form.username.$touched
  }
};

如果您使用 ng-init ，当表单有效性更改时，类将不会更新。