如何编写 ng-class 对象来比较复杂的条件？

Question

有一个表单可以让用户分 4 步输入一些字段。对于每个步骤，可能有几个字段。如果当前步骤中显示的所有字段都有效，则此步骤将显示绿色，否则显示红色。

对于第 3 步，最多同时显示 4 个字段，假设 A、B、C、D。假设每个有效值是 a,b,c,d accordingly.Because 一些字段将 show/hide 根据前面的 selection.The 最终逻辑条件应该是 abcd||abc||ab||a||bcd||bc||d(abcd 表示 a&&b&&d&&c).我正在使用带有对象的 ng-class 来更改 css 颜色，代码段如下所示：

ng-class="{
"green": abcd||abc||ab||a||bcd||bc||d,
"red": !(abcd||abc||ab||a||bcd||bc||d)
}"

如您所见，这真是一个丑陋的解决方案...有没有优雅的方法来解决这个问题？

Answer 1

你可以传递 ng-class 一个函数

ng-class="{'green': isValid(), 'red': !isValid()}"

并在您的控制器中创建函数

$scope.isValid=function(){ 
    return abcd||abc||ab||a||bcd||bc||d;
}

Answer 2

如果您需要重构，
您可以提取 "comparison" 部分并将其放入将在 ng-class 中调用的函数中，因此：

查看：

ng-class="{
 "green": getClass,
 "red": !(getClass)
}"

控制器：

$scope.isValidClass = function() {
 return (abcd||abc||ab||a||bcd||bc||d);
};

请注意，您需要添加“$scope”。作为 abcd、ab 等的前缀

如何编写 ng-class 对象来比较复杂的条件？

how to write ng-class object to compare complicated conditions?

javascript

forms

angularjs

ng-class