AngularJS에서 ng-class를 사용하는 방법에 대한 간략한 토론

세 가지 방법이 있습니다.

1. $scope를 통한 바인딩(권장되지 않음)
2. 객체 배열을 통한 바인딩
3. 키/값 쌍을 통한 바인딩

구현 방법:

1. $scope를 통한 바인딩(권장하지 않음):

function ctrl($scope) { 
  $scope.className = "selected";
}

<div class="{{className}}"></div>

2. 객체 배열을 통한 바인딩:

function ctrl($scope) { 
  $scope.isSelected = true;
}

<div ng-class="{true:&#39;selected&#39;,false:&#39;unselected&#39;}[isSelected]"></div>

isSelected가 true인 경우 isSelected가 false인 경우 선택한 스타일을 늘립니다. , 선택되지 않은 스타일을 추가합니다.

3. 키/값 쌍을 통한 바인딩:

function ctrl($scope) { 
  $scope.isA = true;
  $scope.isB = false;
  $scope.isC = false;
}

<div ng-class="{&#39;A&#39;:isA,&#39;B&#39;:isB,&#39;C&#39;:isC}"></div>

A일 때 true이면 스타일 A를 추가하고, isB가 true이면 스타일 B를 추가하고, 스타일 C를 추가합니다.

<ion-list>
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
    {{project.title}}
  </ion-item>
</ion-list>

프로젝트 루프에 따라 ion-item을 생성합니다. activeProject가 현재 루프되는 프로젝트인 경우 active 스타일을 추가합니다.

몇 가지 참고 사항:

1. 컨트롤러 $scope에는 데이터와 동작만 있어야 하므로 첫 번째 방법은 권장되지 않습니다

2. 수업과 함께 활용 가능