AngularJS で ng-class を使用する方法についての簡単な説明

3 つの方法があります:

1. $scope を介したバインド (推奨されません)
2. キー/値のキーと値のペアを介したバインド

実装方法:

1. (推奨されません):

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 の場合、isS が 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>

isA が true の場合は A スタイルを追加し、isC が true の場合は 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 が現在ループされているプロジェクトである場合、アクティブなスタイルを追加します。

いくつかの注意事項:

1. コントローラー $scope にはデータと動作のみを含める必要があるため、最初の方法はお勧めできません

2. ng-class は関連するスタイルを追加し、class と一緒に使用できます