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

Question

有一种形式可以让用户以4个步骤输入一些字段。每一步都可能有几个字段。如果当前步骤中显示的所有字段都是有效的，则此步骤将显示绿色，否则将显示为红色。

对于第3步，最多同时显示4个字段，比如说A，B，C，D。假设每个有效值为a，b，c，d。由于某些字段将根据之前的选择显示/隐藏。最终逻辑条件应为abcd||abc||ab||a||bcd||bc||d（abcd表示a&&b&&d&&c）。我使用的是NG-类对象更改CSS颜色，片段是象下面这样：

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

正如你所看到的，这实在是丑陋的解决方案...有没有解决这个优雅的方式？

Answer 1

你可以通过纳克级的功能

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

，并在控制器

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

Answer 2

创建funcion如果重构是你需要什么，
你可以提取“比较”部分，并把它放在一个函数中，这个函数将在ng级中被调用，因此：

查看：

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

控制器：

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

注意，你会需要添加 “$范围。”作为abcd，ab等的前缀。