ng-class에서 이것은 어떤 angularjs 식 구문입니까?

ng-class에서 이것은 어떤 angularjs 식 구문입니까?

앵귤러JS Noob Handbook에는 클래스 조작을 단순한 식과 바인딩으로 줄이는 코드가 있습니다.

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

단, ng-class 표현 구문은 무엇입니까?세로 막대(|)는 필터를 통과하고 필터는 콜론 뒤에 있는 파라미터를 통과시킬 수 있다는 것은 알고 있습니다만, 위의 코드는 다른 동작을 하고 있습니다.오른쪽 범위 변수가 true로 평가되면 왼쪽 식이 포함됩니다. 그렇지 않으면 삭제됩니다.

이것은 ng-class 디렉티브에 고유한 것입니까?http://docs.angularjs.org에 이를 설명하는 문서가 있습니까?

이것은 문서에서 간략하게(내 생각에 너무 간략하게) 언급되어 있습니다.오브젝트를 전달했을 경우ngClass키 값이 참일 경우 개체의 각 키를 클래스로 요소에 적용합니다.예를 들어 다음과 같습니다.

$scope.first = true
$scope.second = false
$scope.third = true

와 함께

<div ng-class="{a: first, b: second, c: third}"></div>

이 될 것이다

<div class="a c"></div>

여러분들도 아마 이런 걸 보셨을 거예요.

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

매우 rad 구문입니다.

편집: 여기서 일어나는 일은complete"class요소에 추가되다if(item.Id != 0)또는 다음과 같이 쓸 수 있습니다.<div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]monster Eats Cookies 함수에 의해 결정된 대로 Elmo는 쿠키를 먹지 않기 때문에 이 함수는 반환됩니다.falsehtml 요소는 라는 클래스를 얻습니다.cookieless.

간단한 예:<div ng-class="{false: 'DoubleNegative'}[1 == 0].1 !== 0즉, "false" -- "DoubleNegative클래스가 요소에 추가됩니다.

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

`

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

부록

또한 다양한 키를 사용하여 자신의 상태를 매핑할 수 있다는 것을 방금 깨달았습니다.예를 들어 다음과 같습니다.

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

그mute항목에 "가 없는 경우 클래스가 적용됩니다.hasValue「프로퍼티.또한 특정 유형 또는 값에 대해 클래스를 적용할 수 있습니다.

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

다음 컬렉션에서는 오브젝트인 항목을 숨기면서 사용자의 이름을 강조합니다.

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

이를 통해 $scope 속성에서 특정 값을 확인할 수 있습니다.가끔 이게 아주 유용할 것 같아요.

건배.

ng-click="flags.open=!flags.open"

값을 바꾸다flags.open참인지 거짓인지.
그리고.

ng-class="{active:flags.open}"  

수업의 유무를 결정하다active존재하는지 아닌지는 의 값에 따라 결정됩니다.flags.open.
위의 예시를 보여 주는 바이올린을 참조하십시오.

다음 예시와 같습니다.

div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")

필터로 식을 전달할 수 있는 방법은 다음과 같습니다.

 <div ng-class="{ 'customer-page': ('customer' | isRoute), 
  'orders-page': ('orders' | isRoute)  }">....</div>

언급URL : https://stackoverflow.com/questions/14735257/what-angularjs-expression-syntax-is-this-in-ng-class