Was ist der beste Weg, um bedingt eine Klasse anzuwenden?

Question

Sagen wir, Sie haben ein Array, das in einem ul mit einem li für jedes Element und einer Eigenschaft auf dem Controller namens selectedIndex gerendert wird. Wie könnte man am besten eine Klasse zu dem li mit dem Index selectedIndex in AngularJS hinzufügen?

Derzeit dupliziere ich (manuell) den li-Code und füge die Klasse zu einem der li Tags hinzu und benutze ng-show und ng-hide, um nur ein li pro Index anzuzeigen.

Answer 1

Ich würde vorschlagen, dass du die Bedingung in deinem Controller mit einer Funktion überprüfst, die true oder false zurückgibt.

{{day.date}}

Und überprüfe die Bedingung in deinem Controller.

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 2

Hier ist eine weitere Option, die gut funktioniert, wenn ng-class nicht verwendet werden kann (zum Beispiel beim Stylen von SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(Ich denke, du musst das neueste instabile Angular verwenden, um ng-attr- verwenden zu können. Ich bin derzeit auf 1.1.4)

Answer 3

Wenn du Angular vor v1.1.5 verwendest (d.h. kein ternärer Operator) und immer noch eine äquivalente Möglichkeit haben willst, um einen Wert in beiden Bedingungen zu setzen, kannst du etwas in der Art tun:

ng-class="{'class1':item.isReadOnly == false, 'class2':item.isReadOnly == true}"

Answer 4

Wenn Sie eine gemeinsame Klasse haben, die auf viele Elemente angewendet wird, können Sie eine benutzerdefinierte Direktive erstellen, die diese Klasse hinzufügt, ähnlich wie bei ng-show/ng-hide.

Diese Direktive fügt die Klasse 'active' zu der Schaltfläche hinzu, wenn sie angeklickt wird.

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

Weitere Informationen

Answer 5

Nur etwas hinzufügen, das heute für mich funktioniert hat, nach viel Suche...

Hoffe, dass dies bei Ihrer erfolgreichen Entwicklung hilft.

\=)

Nicht dokumentierte Ausdruckssyntax : Toller Website-Link... =)