Eine kurze Diskussion zur Verwendung der ng-Klasse in AngularJS

Es gibt drei Methoden:

1. Bindung über $scope (nicht empfohlen)
2. Bindung über Objektarray
3. Bindung über Schlüssel/Wert-Paare

Implementierungsmethode:

1. Bindung über $scope (nicht empfohlen):

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

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

2. Bindung durch Objektarray:

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

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

Wenn isSelected wahr ist, wird der ausgewählte Stil erhöht, wenn isSelected falsch ist , nicht ausgewählten Stil hinzufügen.

3. Bindung durch Schlüssel/Wert-Paare:

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>

When isA Wann es ist wahr, Stil A hinzufügen; wenn isB wahr ist, Stil B hinzufügen; wenn isC wahr ist, Stil C hinzufügen.

<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>

Ionenelement gemäß der Projektschleife erstellen. Wenn das aktive Projekt das Projekt ist, zu dem derzeit eine Schleife ausgeführt wird, fügen Sie den aktiven Stil hinzu.

Einige Hinweise:

1 Die erste Methode wird nicht empfohlen, da der Controller $scope nur Daten und Verhalten enthalten soll

2 verwandte Stile. Kann zusammen mit der Klasse verwendet werden