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-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

如果你需要一个重构，
你可以提取＆＃34;比较＆＃34; part并将其放在将要在ng-class中调用的函数中，因此：

查看：

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

控制器：

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

请注意，您需要添加＆＃34; $ scope。＆＃34;作为abcd，ab等的前缀

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

2 个答案: