AngularJS ngClass 식을 중첩 할 수 있습니까?

Question

저는 AngularJS를 처음 접했고 우리가 상속 한 (원래 제 3 자에 의해 개발 된) 응용 프로그램에 대한 유지 관리 작업이 할당되었습니다.

테이블의 머리글 행 왼쪽에는 작은 (+) 또는 빼기 (-) 기호가 표시되어 클릭 할 때 섹션을 확장할지 축소할지 나타냅니다. 이것은 다음과 같이 ngClass를 사용하여 수행합니다.

ng-class="{false:'icon-plus',true:'icon-minus'}[day.expanded]" 

섹션에 데이터가없고 확장 할 수없는 경우 버튼을 제거해야합니다. 이 이것에 대한 클래스 (.plus-자리) 이미와 사용을 ngClass 표현이 나에게 day에 hasTrips 속성을 추가 할 수있는 것이

ng-class="{false:'plus-placeholder',true:{false:'icon-plus',true:'icon-minus'}[day.expanded]}[day.hasTrips]" 

같은 것을 할 수 있도록 중첩 될 수 있는지 궁금 해서요 과제를 완수하십시오.

이것이 가능하지 않다면 expandoState과 같은 속성을 추가해야 문자열 'collapsed', 'expanded'및 'empty'를 반환 할 필요가 있다고 생각합니다. 그래서 ngClass를 이와 같이 코딩 할 수 있습니다.

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[day.expandoState]" 

그리고 어쨌든이 방법을 사용하는 것이 더 깨끗한 방법 일 수 있습니다. 어떤 생각/제안? 관련성이있는 경우 앱에서 AngularJS v1.0.2를 사용하고 있습니다.

Answer 1

당신은 확실히 수 당신이 언급 한 두 가지 옵션 중 하나를 수행하십시오. 두 번째 방법은 읽을 수있는 코드 측면에서 첫 번째 방식보다 훨씬 낫습니다.

여러분이 언급 한 expandoState 속성은 아마도 속성이나 범위에있는 메서드 여야합니다. 그런 다음 속성은 다음과 같이 표시됩니다.

ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[expandoState()]" 

이 방법을 범위에 적용하려면 관련 컨트롤러를 찾아야합니다. 이것은 아마도 day이 범위에 할당 된 곳일 것입니다. 그냥 그냥 사용하는 클래스를 반환

$scope.buttonClass = function() { 
    // Return button class name, based on $scope.day 
}; 

같은 컨트롤러의 방법을 쓸 수있다, 또는

$scope.expandoState = function() { 
    // Return current state name, based on $scope.day 
}; 

---

추가 할 수 있습니다. 이렇게하면 첫 번째 옵션의 논리를 훨씬 더 읽기 쉬운 방식으로 작성할 수 있습니다. 그럼 당신은 사용할 수 있습니다

ng-class="buttonClass()"