angularjs - 在AngularJS中重用ngClass指令

我正在尝试验证表单，并且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>

我不明白为什么这行不通。您对以上代码的可重用性还有其他建议吗？

最佳答案

怎么样:

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，则在更改表单有效性时不会更新这些类。

关于angularjs - 在AngularJS中重用ngClass指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29856773/