복소 각도 jng 클래스

복소 각도 jng 클래스

컴포넌트를 가지고 있는데 css 클래스를 설정하는 데 문제가 있습니다.항상 "상자" 클래스가 있고 지시적인 "class" 인수로 지정된 추가 클래스와 하나의 조건부 클래스 "mini"가 있어야 합니다.

개념적으로 달성하고 싶은 것은 다음과 같습니다.

<div class="box {{class}}" data-ng-class="{mini: !isMaximized}">
...
</div>

문제는 class html Atribut을 설정하면 ng-class Atribut이 생략된다는 것입니다.컨트롤러를 변경하지 않고 예제를 작동시키는 방법이것이 가능합니까?아니면 컨트롤러로 클래스를 설정해야 합니까(피하고 싶은 경우)?

빠른 해결책은 ng-class 속성 내에 박스 클래스를 정의하는 것입니다.

<div data-ng-class="{mini: !isMaximized, box: true}"></div>

스코프 변수를 클래스로 포함할 경우 ng-class를 사용할 수 없습니다.

<div class="{{class}} box {{!isMaximized && 'mini' || ''}}">

각도 표현은 3진 연산자를 지원하지 않지만 다음과 같이 에뮬레이트할 수 있습니다.

condition & & (true인 경우 응답)|| (false인 경우 응답)

하나는 $scope 파생 클래스이고 다른 하나는 문자 그대로 클래스인 여러 개의 클래스가 필요했습니다.안드레의 힌트 덕분에 아래가 효과가 있었어요.

<h2 class="{{workStream.LatestBuildStatus}}" 
    ng-class="{'expandedIcon':workStream.isVisible,  'collapsedIcon':!workstream.isvisible}">{{workStream.Name}}</h2>

편집: 새로운 버전의 Angular에 대해서는 Nitins가 최고의 ATM이기 때문에 응답합니다.

저는 이게 효과가 있었어요(Angular 작업 중)현시점에서는 JS v1.2.14이므로 1.2.X+는 이 기능을 지원하지만 이전 버전에 대해서는 확실하지 않습니다.

<div class="box" data-ng-class="{ {{myScopedObj.classesToAdd}}: true, mini: !isMaximized }"></div>

교환해 드렸습니다.{{class}}와 함께{{myScopedObj.classesToAdd}}스코프 변수나 조금 더 복잡한 오브젝트를 이러한 방법으로 사용할 수 있음을 나타냅니다.

따라서 이 방법으로 작성된 모든 DIV 요소에는 "박스" 클래스와 그 안에 포함된 모든 클래스가 포함됩니다.myScopedObj.classesToAdd(ng-module을 사용하는 경우 ng-module을 사용하여 배열 내의 모든 요소에 다른 클래스가 적용되어야 함) 그리고 다음과 같은 경우 "mini" 클래스가 적용됩니다.!isMaximized.

이중 괄호를 사용하지 않고 각도 v1.2+로 테스트한 스코프 변수를 포함하는 또 다른 방법입니다.

<div ng-class="['box', 
                aClass, 
               {true:'large': false: 'mini'}[isMaximized]]"></div>

변수가 3진수를 사용하여 복잡성을 증가시키지 않고 다른 유형을 인덱스로 사용할 수 있기 때문에 오히려 좋습니다.부정할 필요도 없어집니다).다음은 바이올린 링크입니다.

아래에 제시된 간단한 식을 사용할 수 있습니다.

ng-class="{'active' : itemCount, 'activemenu' : showCart}"

언급URL : https://stackoverflow.com/questions/13607569/complex-angular-js-ng-class