根据多个条件更改班级组合

Posted 2023-03-06

【中文标题】根据多个条件更改班级组合

【英文标题】：Changing class combinations based on multiple conditions

【发布时间】：2017-12-07 10:47:27

【问题描述】：

我的样式表中定义了几个样式类，如下所示：

.left-align
  /* some styles here */

.right-align
  /* some styles here */

.validate-error
  /* some styles here */

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

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

但是当validate() 返回假时，即使isNumericField 为真，这也不会使内容右对齐。

简而言之，我需要添加 left-align 或 right-align 取决于 isNumericField 属性以及 validate-error 如果 validate() 返回 false。

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

如果有任何方法可以实现这一点，请告诉我：

【问题讨论】：

不能使用简单的if循环来获取属性类并进行更改？类似于： if ($scope.isNumericField) $scope.class= "left-align";否则 $scope.class= "右对齐";

@HemaNandagopal：很好，到目前为止我可以切换两个类，但是如果validate() 方法返回false，我需要找到一种方法来添加第二个类。结果我期待ng-class="right-align validate-error"

在这种情况下，您可以结合这两个类，$scope.class=" right-align validate-error";

【参考方案1】：

您可以将类名的“映射”指定为布尔值：

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