복잡한 조건을 비교하기 위해 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-class="{ 
"green": abcd||abc||ab||a||bcd||bc||d, 
"red": !(abcd||abc||ab||a||bcd||bc||d) 
}" 

: 내가 CSS의 색상을 변경하는 물체로 NG-클래스를 사용하고, 스 니펫은 다음과 같다?

Answer 1

당신은 NG-클래스를 함수

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 등의 접두사로 사용합니다.