AngularJS
ng-class 지시문

ng-class 표현의 세 가지 유형

Angular는 ng-class 지시문에서 세 가지 유형의 표현식을 지원합니다.

1. 문자열

<span ng-class="MyClass">Sample Text</span>

문자열로 평가되는 표현식을 지정하면 Angular에게이를 $ scope 변수로 처리하도록 지시합니다. Angular는 $ 범위를 검사하고 "MyClass"라는 변수를 찾습니다. "MyClass"에 포함 된 텍스트는이 <span> 적용되는 실제 클래스 이름이됩니다. 각 클래스를 공백으로 구분하여 여러 클래스를 지정할 수 있습니다.

컨트롤러에서 다음과 같은 정의를 가질 수 있습니다.

$scope.MyClass = "bold-red deleted error";

Angular는 MyClass 라는 표현을 평가하고 $ 범위 정의를 찾습니다. <span> 요소에 "bold-red", "deleted"및 "error"의 세 클래스를 적용합니다.

이 방법으로 클래스를 지정하면 컨트롤러의 클래스 정의를 쉽게 변경할 수 있습니다. 예를 들어 다른 사용자 상호 작용이나 서버에서로드 된 새 데이터를 기반으로 클래스를 변경해야 할 수 있습니다. 또한 평가할 표현식이 많은 경우 $scope 변수에서 클래스의 최종 목록을 정의하는 함수에서 평가할 수 있습니다. 이것은 많은 평가를 HTML 템플릿의 ng-class 속성으로 집어 넣는 것보다 쉽습니다.

2. 개체

이 클래스는 ng-class 사용하여 클래스를 정의하는 가장 보편적 인 방법입니다.이 클래스를 사용하면 사용할 클래스를 결정하는 평가를 쉽게 지정할 수 있기 때문입니다.

키 - 값 쌍을 포함하는 객체를 지정하십시오. 키는 값 (조건부)이 true로 평가 될 때 적용될 클래스 이름입니다.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. 배열

배열로 평가되는 표현식을 사용하면 문자열 (위의 # 1 참조)과 조건부 객체 (위의 # 2)의 조합을 사용할 수 있습니다.

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

이렇게하면 사용자가 모든 클래스 이름을 입력 할 수있게하는 범위 변수 UserStyle 바인딩 된 텍스트 입력 필드가 만들어집니다. 이들은 사용자가 입력 할 때 <p> 요소에 동적으로 적용됩니다. 또한 사용자는 warning 범위 변수에 데이터 바인딩 된 확인란을 클릭 할 수 있습니다. 이것은 <p> 요소에도 동적으로 적용됩니다.