根据多个条件更改 class 组合

Question

我的样式 sheet 中定义的样式 class 很少，如下所示：

.left-align{
  /* some styles here */
}
.right-align{
  /* some styles here */
}
.validate-error{
  /* some styles here */
}

根据class中的数据类型，我需要将内容左对齐或右对齐，而且我想调用一个方法来验证我在控件中的数据，如果验证失败需要将 validate-error class 也附加到 ng-class。我在 ng-class 中浏览了不同的 SO 线程和其他标题为 多个条件的文章和 QA 站点，但在我的场景中没有找到任何工作，我已经根据参考尝试了以下内容:

ng-class="{!vm.validate()?'validate-error': vm.isNumericField?'right-align':'left-align'}"

但是即使 isNumericField 为真而 validate() returns 为假，这也不会使内容右对齐。

简而言之，我需要添加 left-align 或 right-align 取决于 isNumericField 属性以及 validate-error if validate() returns假的。

"isNumericField?{'left-align':'right-align'} + 'validate-error':validate()"

请任何人告诉我是否有任何方法可以实现此目的：

Answer 1

您可以将 class 个名称中的 "map" 个指定为布尔值：

ng-class="{'validate-error': !vm.validate(), 'right-align': vm.isNumericField, 'left-align': !vm.isNumericField}"

根据多个条件更改 class 组合

Changing class combinations based on multiple conditions

html

css

angularjs

validation

ng-class